animation și @keyframes în CSS: explicație, valori și exemple

@keyframes pulsatie { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } .buton-alerta { animation: pulsatie 2s infinite ease-in-out; }

Ce face `animation și @keyframes`

În timp ce transition are nevoie de o acțiune a utilizatorului pentru a trece dintr-o stare în alta, animation poate rula automat, repetat la nesfârșit (infinite) sau în buclă alternativă.

Regula @keyframes definește stările intermediare ale animației (de la 0% la 100%), iar proprietatea animation leagă acea secvență de un element HTML specificând durata și viteza.

Valori uzuale

Valoare	Descriere
`@keyframes nume`	Blocul care definește etapele (0%, 50%, 100%).
`animation-name`	Numele animației din @keyframes.
`animation-duration`	Timpul unei repetiții complete (ex. 1.5s).
`animation-iteration-count`	„infinite” (la nesfârșit) sau un număr de repetări.
`animation-timing-function`	Viteza de-a lungul cadrelor (ease, linear).

Exemple

Exemplul 1: Spinner circular de încărcare (Loading indicator)

O rotație continuă 360deg fără pauză (linear).

@keyframes rotire-continua {
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: rotire-continua 0.8s linear infinite;
}

Efect vizual în browser

Un cerc albastru care se rotește continuu și uniform, simulând încărcarea unei pagini.

Greșeli frecvente

Crearea de animații nesfârșite rapide și agresive fără a respecta directiva de accesibilitate @media (prefers-reduced-motion: reduce) pentru utilizatorii sensibili la vertij.

Comenzi înrudite

transition: Animă fluid schimbarea valorilor CSS între două stări (de exemplu la :hover sau la adăugarea unei clase).
transform (translate, rotate, scale, skew): Modifică forma, poziția și unghiul unui element în spațiul 2D sau 3D, fără a deranja elementele vecine.

Ce face animation și @keyframes