Transições vs Animações

Enquanto desenvolve uma animação na web, você usa transição ou uma animação? Em alguns casos, você vai preferir optar por uma, ao invés da outra. Vamos ver as diferenças.

O que são Transições?

Uma transição ocorre quando um elemento muda de um estado para outro e o navegador preenche essa mudança de estado com uma sequência de quadros intermediários. Possui um começo e um estado final.

É comum vermos transições sendo usadas para criação de efeitos com hover, ou quando algo é adicionado e/ou removido na página. O efeito do hover pode ser uma mudança sutil na cor da font e a informação na página pode surgir na tela.

Como as transições são limitadas a esses dois estágios, estas podem pecar na suavidade das animações e ao mesmo tempo se tornarem mais fáceis de serem implementadas.

Quando usar

Se você quer fazer com que uma animação aconteça suavemente, usar uma transição é uma boa escolha. Mudanças simples podem ser com transições, utilizando-se da propriedade timing-function para controlar a curva de velocidade da transição.

Uma transição se aplicaria bem quando alguém movesse o cursor sobre um botão, ou ainda clicasse em um botão:

Ou quando algo é adicionado à página.

O que são animações?

Animações no CSS são uma alternativa poderosa as transições. Ao invés de contar apenas com uma mudança do estado inicial para o estado final, animações podem conter tantos novos estados entre começo e o final, quanto você desejar e oferecem mais controle no que diz a respeito a como eles serão animados.

Enquanto uma transição alterna somente entre A e B, uma animação pode conter A,B, C e só então D, ou ainda quantos mais forem necessários.

Isso é possível porque as animações usaa propriedades keyframe. Enquanto uma transição pode ser especificada com apenas uma linha na classe, uma animação funciona fazendo referência a um conjunto de keyframes que são descritos separadamento no CSS.

Quando usar

Se uma animação precisa ser executada enquanto a página carrega ou é mais complexa que uma simples mudança de A para B, um animação com CSS poderá ser mais apropriada.

Um exemplo disso é quando você tem na página uma animação que é executada depois de um certo período de tempo, como um efeito de piscar no personagem Baymax:

Uma animação também pode ser uma boa escolha quando um determinado item precisa se mover entre vários lugares de uma página, como janelas com informações que surgem ao passar o cursor sobre determinada área.

Algumas vezes não é óbvio

Um post recente começou como uma animação, mas depois fez-se necessário o uso de transições.

Quando comecei a projetar esse relógio, o movimento dos ponteiros era constantemente carregado. Uma situação para conveniente para o uso da propriedade animation. Era pra animação ser carregada e continuar se repetindo infinitamente. A medida em que foi ficando mais complexo, eu percebi que que fazia mais sentido definir os ângulos dos ponteiros usando JavaScript.

Como os ponteiros estavam sendo movidos por JavaScript, transições se tornaram uma escolha mais viável. Quando o JavaScript muda o ângulo de um ponteiro, a propriedade transition do CSS manipula a mudança(do estado A para o estado B) de uma maneira mais elegante do que uma animação faria.

Dê uma olhada nesse tutorial de como criar um relógio com CSS para mais detalhes

Em resumo

Transições para criar uma suave transição de um estado para outro e animações para animações mais complexas com uma série de movimentos.

Transições são geralmente mais fáceis de criar e administrar, além de se aplicarem a grande maioria das situações. Se você precisa de maior controle sobre os passos da animação de um elemento ou se a animação precisa ser carregada, então, uma animação com keyframes  deve ser a melhor escolha.

Make sure to follow on Twitter for all the latest updates!