@keyframes, animation e prefers-reduced-motion

Quando uma transição não basta

Uma transition anima de um estado A a um estado B e precisa de um disparador (um :hover, um clique...). Mas e um spinner que gira sozinho, um coração que pulsa ou um elemento que pisca? Para animações com vários passos, que se repetem ou que começam sozinhas, usamos @keyframes junto à propriedade animation.

Definir os quadros

@keyframes batida {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

Você também pode usar as palavras-chave from (= 0%) e to (= 100%):

@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

Aplicar a animação

.coracao {
  animation: batida 1s ease-in-out infinite;
}

A forma curta de animation admite, entre outros:

• nome: o dos @keyframes (batida).
• duração: 1s, 500ms...
• função de tempo: ease-in-out, linear...
• iterações: um número ou infinite.
• direção: normal, alternate (vai e volta)...

Acessibilidade: prefers-reduced-motion

Nem todo mundo curte movimento: para algumas pessoas, o excesso de animação provoca tontura ou mal-estar de verdade. Respeite a configuração do sistema delas com a media query prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  .coracao {
    animation: none;   /* desativa o movimento */
  }
}

Boa prática: anime por padrão, mas anule as animações quando o usuário pede menos movimento. É um requisito de acessibilidade, não um extra.

Exemplos

Nome da animação referenciado por @keyframes

const animacao = "batida 1s ease-in-out infinite";
console.log(animacao);