8

Ultimamente tenho estudado algumas animações com CSS. Porém, pesquisando mais sobre o assunto, acabei verificando que é possível fazer animações também com javascript.

  • Qual a diferença?
  • Qual é mais viável?

Sei que animações com CSS limitam dependendo do navegador, o mesmo ocorre com JavaScript?

9
  • 1
    Como assim "animações com CSS limitam dependendo do navegador"? Poderia explicar melhor esse trecho? Commented 5/05/2015 às 19:03
  • 1
    esses tempos eu perguntei o mesmo aqui pt.stackoverflow.com/questions/59798/… Commented 5/05/2015 às 19:56
  • 1
    Relacionado / possível duplicata: pt.stackoverflow.com/questions/51542/…
    – bfavaretto
    Commented 5/05/2015 às 19:59
  • @renan, tente executar alguma animação no IE8 ou IE7. Commented 7/05/2015 às 21:17
  • @AndreyHartung Não é a mesma pergunta porque o meu questionamento não foi sobre usar javascript para manipular css, porém, colocando um contra o outro para a criação de animações. De qualquer modo, a sua questão também ajudou nos meus estudos! Obrigado! Commented 7/05/2015 às 21:18

1 Resposta 1

11

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

4
  • 1
    Caraca, eu to atras dessa explicação a muito tempo, se eu pudesse eu te dava um caminhão de upvotes! Commented 5/05/2015 às 20:00
  • Vale uma olhada neste link, originalmente postado aqui. Eu também achava que dava pra dizer que animações por CSS são sempre mais rápidas, mas o artigo prova que não.
    – bfavaretto
    Commented 5/05/2015 às 20:19
  • Eu já tinha postado o link na resposta :D Commented 5/05/2015 às 20:33
  • @PauloCosta Tanto a sua resposta quanto a fonte que disponibilizou me ajudaram muito! É ótimo saber que há estudos e preocupações sobre isso! Só para constatar, você digitou errado ali em cima (é GSAP, e não GASP). Resumindo sua resposta, o bom senso é o que manda no final. E vou pesquisar mais sobre GSAP. Commented 7/05/2015 às 21:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .