CSS: animações com Transition e Animation

Link Transform MDM

Formas comuns de utilizar o transition

• transition: 1s; - aplica uma animação de 1 segundo para TODAS as propriedades de um seletor; é importante especificar quais propriedades vão ser animadas para evitar alguns gargalos de performance ou propriedades desnecessárias consumindo recursos em animações (que normalmente podem exigir bastante de computadores de usuários ou usuárias com hardwares menos potentes).
• transition: transform 1s, opacity 0.3s; - aplica uma animação de 1 segundo para a propriedade transform, e uma de 0.3 segundos para o opacity. Todas as outras propriedades não são afetadas.

• Também é possível especificar um delay para o transition com transition-delay, tal como específicar a duração e as características via propriedades separadas; no dia a dia acabamos utilizando a forma dos exemplos anteriores.

  Transition MDM

CSS Animation: animando automaticamente e com mais etapas

Repare que a animação está acontecendo sozinha de forma contínua, bem semelhante a alguns itens que existem para chamar a atenção, como setas indicando que algum ponto é clicável em alguns sites.Para isso ser possível estamos utilizando a propriedade animation.

Para entendermos como fazer a animação do exemplo, precisamos primeiramente compreender a ideia de trabalhar com keyframes. Basicamente, iremos definir que dado um espaço de tempo entre o começo e o fim do mesmo, determinadas propriedades CSS serão aplicadas.

E para associar esses keyframes em um elemento do HTML, precisamos adicionar essa animação go-back, ou qualquer outra, através da propriedade animation:

Porém, dessa forma a animação só acontece uma vez; caso tenhamos interesse em fazê-la acontecer de forma infinita, podemos adicionar a propriedade animation-iteration-count: infinite;.

Ao invés de infinite, podemos passar um número máximo de vezes que nossa animação irá se repetir, e caso você queria fazer a animação ir e voltar do ponto final para o começo e vice-versa, é só adicionar a propriedade animation-direction: alternate;.

Como usar Animate.css

Como vimos, animate css é uma biblioteca de animações CSS pré-definidas que você pode usar facilmente em seus projetos web.

Confira abaixo, alguns passos básicos para começar a usar o animate.css em seu site:

Interceptando animations e transitions via JavaScript

Como vimos anteriormente, é possível ter vários níveis de controle nas animações com CSS, porém caso você queria ter um controle mais fino via JavaScript via um elemento.addEventListener é possível monitorar quanto uma transition ou um animation termina:

MDM animationend_event

MDM transitionend_event