La ce servesc keyframes și cum funcționează?

@keyframes — regulă CSS care definește cadrele cheie ale unei animații. Permite crearea unei secvențe de stări ale unui element în diferite momente de timp, pe care browser-ul le va interpola lin, creând un efect de mișcare. Funcționează prin definirea unui set de stiluri pentru element la anumite procente de timp (de la 0% la 100%) sau folosind cuvintele cheie from (0%) și to (100%).

Pentru a folosi keyframes este necesar:

1. Să definești regula @keyframes cu un nume unic.
2. În interiorul @keyframes, să specifici stilurile pentru diferite puncte temporale (în procente sau from/to).
3. Să aplici animația creată elementului folosind proprietatea CSS animation.

@keyframes slidein {
  from {
    transform: translateX(0%); // Starea inițială: fără deplasare pe X
  }

  to {
    transform: translateX(100%); // Starea finală: deplasare de 100% pe X
  }
}

.element {
  animation-name: slidein; // Numele animației definite mai sus
  animation-duration: 3s; // Durata animației
  animation-timing-function: ease-in-out; // Funcția de viteză a animației
  animation-delay: 1s; // Întârziere înainte de începerea animației
  animation-iteration-count: infinite; // Numărul de repetări (aici infinit)
  animation-direction: alternate; // Direcția animației (direct, apoi invers)
}

Proprietăți principale ale animation, utilizate împreună cu @keyframes:

Proprietate	Descriere
animation-name	Numele @keyframes care trebuie aplicat.
animation-duration	Durata unui ciclu de animație (de exemplu, 2s, 500ms).
animation-timing-function	Funcția de viteză a animației (de exemplu, linear, ease, ease-in, cubic-bezier).
animation-delay	Întârziere înainte de începerea animației (de exemplu, 1s).
animation-iteration-count	Numărul de repetări ale animației (infinite pentru repetare infinită).
animation-direction	Direcția animației (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Determină ce stiluri se aplică elementului înainte și după animație.
animation-play-state	Determină dacă animația rulează sau este pusă pe pauză.