Animações podem criar efeitos complexos e dinâmicos para aprimorar a experiência interativa do usuário. As animações não exigem um evento de gatilho específico e podem ser configuradas para repetir infinitamente. Além disso, as animações podem ter múltiplos estados intermediários entre os estados inicial e final, proporcionando maior flexibilidade e controle sobre os efeitos visuais produzidos.

Criar animação

Podemos criar animações utilizando a regra @keyframes, que define um conjunto de estilos CSS em vários pontos de uma animação. Também definimos o nome para a animação. Ele deve ser descritivo, ou seja, indicar que tipo de animação é.

@keyframes AnimationName {
 /* Styles at various points (at least initial and final) */ 
}

Para determinar a alteração das propriedades em um ponto específico no tempo, podemos usar as palavras-chave: from (0%) e to (100%). Na maioria das vezes, são utilizados valores percentuais.

@keyframes AnimationName {
  0% {
    /* Properties to be changed */
  }

  10% {
    /* Properties to be changed */
  }

  30% {
    /* Properties to be changed */
  }

  /* As many as we need */
  
  100% {
    /* Properties to be changed */
  }
}

Após declarar a animação, podemos utilizar o nome dos keyframes como valor para a propriedade animation-name em vários elementos. Outra vantagem das animações é que elas podem ser aplicadas repetidamente a múltiplos elementos.

selector {
  animation-name: AnimationName;
}

Prática

Adicionar animação ao elemento div. O objetivo é alterar a propriedade background-color ao longo do tempo. O estado inicial será green, em 60% deve ser red, e no estado final, blue. Além disso, especificar a propriedade animation-duration para observar a animação em funcionamento.