O CSS3
, ainda não esta pronto para animações de nível profissional em grandes projetos escaláveis. Para coisas simples, - CSS3 é o vencedor, não podemos sequer argumentar sobre isso. Se você procura por animações mais robustas
vamos analisar os seguintes pontos:
1. O controle de fluxo
Imagine que você passou noites escrevendo códigos de animações incríveis, de ponta em CSS3 puro. E agora - aqui vem a parte difícil. Você quer controlá-los - pausar, parar, voltar, executados de forma assíncrona, um após outro, colocar em uma linha de tempo e horário. Bem, boa sorte com isso. Literalmente, é quase impossível. Com javascript soluções (como GSAP) é fácil como fazer uma torta! Escrever algumas linhas de código javascript e você está pronto para ir!
2. Animar várias propriedades
Imagine que você deseja escalar uma div e no meio dessa animação, começam a rodar-lo e mudar a cor da borda. Você não pode animar propriedades individuais distintamente. No entanto, soluções baseadas em JS permitem que você anime, literalmente, qualquer propriedade numérica em variedade de formas (é só escrever animate para 50% da largura inicial, animate para 0px, animate para -50px e depois para 150px) .
3. Organização
Código para projetos maiores pode facilmente mudar e você poderá ter que escrever animações complexas, é nessa hora que a organização de código é a chave! Com CSS3 é quase impossível agrupar suas animações em pedaços lógicos para gerenciar facilmente, apenas chamando métodos e callbacks.
4. Compatibilidade
Transições CSS3 não funcionam em navegadores mais antigos. E mais - cada browser lida com eles de forma diferente (e adiciona seus próprios erros para seu aplicativo). Com poucas animações em sua página é provavelmente mais fácil para verificar se tudo corra bem, mas pode tornar-se impossível, uma vez que você vá para um projeto maior. Soluções Javascript fornecem uma camada de abstração. Você não tem que se preocupar com comportamentos específicos de navegadores é aqui que as bibliotecas estão fazendo seu trabalho!
Conclusão
Animações CSS são "ruins"? Certamente que não! Na verdade, eles são ótimos para transições simples entre os estados (como rollovers), quando a compatibilidade com os navegadores mais antigos não é necessária. CSS faz transformações muito bem, e animações CSS pode ser muito atraente para os desenvolvedores que preferem colocar toda a sua animação e apresentação lógica na camada CSS. No entanto, a animação baseada em JavaScript oferece muito mais flexibilidade, melhor fluxo de trabalho para animações complexas e interativamente ricas, e que muitas vezes executa tão rápido (ou mesmo mais rápido) do que animação baseada em CSS.
Resumo:
css3:
- Ponto positivo: rápido
- Ponto negativo: Animação é primitiva
js:
- Ponto positivo: Animação (matemática) podem ter métodos sofisticados,
muito mais interativos para o usuário
- Ponto negativo: Alguns navegadores podem bloquear js, pode ser
pesado, tem tempo de carregamento
Nesse site tem uma comparação bacana, com animações, teste de performance e muito mais! Dê uma olhada.
Fonte