CSS: O Guia Definitivo, 5ª Edição

Capítulo 19. Animação

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: [e-mail]

As transições CSS , abordadas no capítulo anterior, permitem animações simples que são acionadas por alterações no estado do DOM e prosseguem de um estado inicial para um estado final. As animações CSS são semelhantes às transições na medida em que os valores das propriedades CSS mudam ao longo do tempo, mas as animações oferecem muito mais controlo sobre a forma como essas mudanças acontecem. Especificamente, as animações CSS de keyframe permitem-nos decidir se e como uma animação se repete, dão-nos controlo granular sobre o que acontece ao longo da animação, e muito mais. Enquanto as transições desencadeiam alterações implícitas no valor da propriedade, as animações são executadas explicitamente quando as animações de keyframe são aplicadas.

Com as animações CSS, podes alterar os valores das propriedades que não fazem parte do estado pré ou pós-definido de um elemento. Os valores de propriedade definidos no elemento animado não têm necessariamente de fazer parte da progressão da animação. Por exemplo, quando utilizas uma transição, passar do preto para o branco apenas anima através de vários tons de cinzento. Com a animação, esse mesmo elemento não tem de estar preto ou branco ou mesmo entre tons de cinzento durante a animação.

Embora possas fazer a transição através de tons de cinzento, podes transformar o elemento em amarelo e depois ...