Exemple de animații CSS

Variante gata făcute: copiază codul direct sau deschide exemplul în generator și modifică-l după nevoie.

Apariție lină Pentru elemente care apar la încărcarea paginii; both păstrează starea finală.

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.element {
  animation: fade-in 0.6s ease-out 1 both;
}

Intră de jos Cardurile urcă puțin în timp ce apar, efectul clasic de „reveal”.

@keyframes slide-in-up {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.element {
  animation: slide-in-up 0.5s ease-out 1 both;
}

Notificare care sare Atrage atenția asupra unui element nou, de exemplu un clopoțel cu mesaje.

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

.element {
  animation: bounce 1s ease infinite;
}

Câmp greșit Tremură o singură dată când utilizatorul introduce o parolă greșită.

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-8px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(8px);
  }
}

.element {
  animation: shake 0.5s ease-in-out 1;
}

Iconiță de încărcare Rotire continuă; cu linear viteza rămâne constantă.

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

.element {
  animation: spin 1s linear infinite;
}

Buton care pulsează O mărire discretă care invită la clic.

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.element {
  animation: pulse 1.5s ease-in-out infinite;
}

Bătăi de inimă Pentru butoane de „Îmi place” sau donații.

@keyframes heartbeat {
  0%, 28%, 70% {
    transform: scale(1);
  }
  14%, 42% {
    transform: scale(1.25);
  }
}

.element {
  animation: heartbeat 1.3s ease-in-out infinite;
}

Clopoțel care sună Se leagănă de două ori și se oprește.

@keyframes swing {
  20% {
    transform: rotate(15deg);
  }
  40% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(5deg);
  }
  80% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.element {
  animation: swing 1s ease-in-out 2;
}

Cum folosești generatorul de animații CSS

Alege o animație din listă: fade-in, fade-out, slide-in din stânga sau de sus, bounce, pulse, shake, spin, flip, zoom-in, heartbeat, swing sau wobble.
Mută glisoarele Durată și Întârziere (în secunde).
Alege de câte ori se repetă (1, 2, 3 sau infinite), direcția, funcția de timp și fill-mode.
Apasă Redă animația ca s-o vezi din nou, apoi copiază codul: blocul @keyframes și forma scurtă animation.

Sintaxa @keyframes

Un bloc @keyframes are un nume și o listă de cadre cheie, scrise în procente din durata animației. from este același lucru cu 0%, iar to cu 100%. Browserul calculează singur valorile dintre cadre.

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

Forma scurtă animation

Ordinea obișnuită este: nume, durată, funcție de timp, întârziere, număr de repetări, direcție, fill-mode. Ordinea e flexibilă, cu o singură regulă: prima valoare de timp este durata, a doua este întârzierea.

.notificare {
  animation: slide-in-sus 0.4s ease-out 0.2s 1 normal both;
}

animation-fill-mode decide ce stil are elementul în afara animației. Cu forwards păstrează ultimul cadru după ce se termină, cu backwards aplică primul cadru în timpul întârzierii, iar both le face pe amândouă. Fără el, un element care apare cu fade-in după o întârziere se vede o clipă înainte să pornească animația.

Performanță și accesibilitate

Animează de preferință transform și opacity. Ele pot fi calculate de placa video fără a reface așezarea paginii, pe când width, top sau margin obligă browserul să recalculeze layoutul la fiecare cadru.

Unii utilizatori au activată în sistem opțiunea de reducere a mișcării. Respect-o cu media query-ul prefers-reduced-motion:

@media (prefers-reduced-motion: reduce) {
  .notificare {
    animation: none;
  }
}

Întrebări frecvente

Care e diferența dintre animation și transition?

transition animează trecerea între două stări, de exemplu la hover. animation cu @keyframes pornește singură, poate avea oricâte cadre intermediare și se poate repeta.

Cum opresc o animație infinită?

Setează animation-play-state: paused ca s-o pui pe pauză sau animation: none ca s-o elimini. Pentru curbe de accelerare personalizate folosește generatorul de cubic-bezier.