Generatore di Keyframes CSS

Le quattro preimpostazioni

Dissolvenza con scorrimento

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

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

L’elemento appare mentre scorre dal basso verso l’alto.

Pulsazione

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

Un effetto di respiro delicato, adatto ai punti di notifica e ai badge.

Rotazione

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

Una rotazione completa, utile per loader e icone.

Rimbalzo

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

L’elemento salta verso l’alto e torna giù.

Perché transform e opacity?

I browser compongono transform e opacity sulla GPU senza ricalcolare il layout né ridisegnare, quindi animarli resta fluido. Le preimpostazioni evitano di proposito le proprietà che attivano il ricalcolo del layout.

La proprietà abbreviata animation

animation: fade-slide 0.6s ease both; si legge così: l’animazione chiamata fade-slide, della durata di 0.6 secondi, con l’easing predefinito ease. La modalità di riempimento both applica lo stato iniziale prima dell’inizio dell’animazione e conserva lo stato finale al termine, evitando che l’elemento lampeggi prima o torni indietro di colpo dopo il movimento.

Convenzioni sui nomi

• Usa il kebab-case, come da convenzione CSS.
• Descrivi il movimento, non l’elemento: fade-in-up è meglio di alert-appear.
• Evita nomi che possano entrare in conflitto con librerie di terze parti.

Supporto dei browser

@keyframes è universale, supportato da tutti i browser fin da IE 10.