Gerador de Keyframes CSS

As quatro predefinições

Fade-slide

.animated {
  animation: fade-slide 0.6s ease both;
}

@keyframes fade-slide {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

O elemento aparece enquanto desliza de baixo para cima.

Pulso

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: .8; }
}

Um efeito suave de respiração, ótimo para pontos de notificação e selos.

Giro

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

Uma rotação completa, útil para loaders e ícones.

Salto

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-24px); }
}

O elemento salta para cima e volta.

Por que transform e opacity?

Os navegadores compõem transform e opacity na GPU sem recalcular o layout nem repintar, então animá-los permanece fluido. As predefinições evitam de propósito propriedades que disparam o cálculo de layout.

A propriedade abreviada animation

animation: fade-slide 0.6s ease both; lê-se assim: a animação chamada fade-slide, com 0.6 segundo de duração e a curva ease padrão. O modo de preenchimento both aplica o estado inicial antes de a animação começar e mantém o estado final depois que termina, evitando que o elemento pisque antes ou volte de repente após o movimento.

Convenções de nomes

• Use kebab-case, seguindo a convenção do CSS.
• Descreva o movimento, não o elemento: fade-in-up é melhor que alert-appear.
• Evite nomes que possam conflitar com bibliotecas de terceiros.

Suporte dos navegadores

@keyframes é universal, suportado por todos os navegadores desde o IE 10.