Generator keyframes CSS

Cztery ustawienia

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); }
}

Element pojawia się, przesuwając się z dołu do góry.

Pulse

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

Delikatny efekt pulsowania, dobry do punktów powiadomień i plakietek.

Spin

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

Pełny obrót, przydatny dla loaderów i ikon.

Bounce

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

Element podskakuje do góry i wraca.

Dlaczego transform i opacity?

Przeglądarki komponują transform i opacity na GPU bez ponownego obliczania układu i malowania, więc ich animowanie pozostaje płynne. Ustawienia celowo unikają właściwości uruchamiających obliczanie układu.

Skrócona notacja animation

animation: fade-slide 0.6s ease both; czytamy: animacja o nazwie fade-slide, trwająca 0.6 sekundy, z domyślnym przejściem ease. Tryb wypełnienia both stosuje stan początkowy przed startem animacji i utrzymuje stan końcowy po jej zakończeniu, dzięki czemu element nie miga przed ruchem ani nie cofa się gwałtownie po nim.

Konwencje nazewnictwa

• Używaj notacji kebab-case, zgodnie z konwencją CSS.
• Opisuj ruch, nie element: fade-in-up jest lepsze niż alert-appear.
• Unikaj nazw, które mogą kolidować z bibliotekami firm trzecich.

Wsparcie przeglądarek

@keyframes jest uniwersalne, obsługiwane przez każdą przeglądarkę od IE 10.