Milleks on vajalikud keyframes ja kuidas nad töötavad?

@keyframes — CSS reegel, mis määratleb animatsiooni põhikaadrid. See võimaldab luua elemendi olekute järjestuse erinevatel ajahetkedel, mida brauser sujuvalt vahetab, luues liikumise efekti. See toimub määrates stiilide komplekti kindlal protsentuaalsel ajal (0% kuni 100%) või kasutades sõnu from (0%) ja to (100%).

keyframes kasutamiseks:

1. Määrata @keyframes reegel unikaalse nimega.
2. @keyframes sees märkida stiilid erinevateks ajamärkideks (protsentides või from/to).
3. Rakendada loodud animatsioon CSS omaduse animation abil elemendile.

@keyframes slidein {
  from {
    transform: translateX(0%); // Algseis: ilma X suunalise nihketa
  }

  to {
    transform: translateX(100%); // Lõppseis: nihke väärtus 100% X suunas
  }
}

.element {
  animation-name: slidein; // Animatsiooni nimi, mis on eesmääratud
  animation-duration: 3s; // Ühe tsükli kestus
  animation-timing-function: ease-in-out; // Animatsiooni kiiruse funktsioon
  animation-delay: 1s; // Viivitus enne algust
  animation-iteration-count: infinite; // Korduste arv
  animation-direction: alternate; // Animatsiooni suund
}

Peamised omadused animation, mida kasutatakse koos @keyframes-ga:

Omadus	Kirjeldus
animation-name	@keyframes nimi, mida rakendada.
animation-duration	Ühe tsükli kestus (näiteks, 2s, 500ms).
animation-timing-function	Kiiruse funktsioon (näiteks, linear, ease, ease-in, cubic-bezier).
animation-delay	Viivitus enne algust (näiteks, 1s).
animation-iteration-count	Korduste arv (infinite – lõpmatu kordamine).
animation-direction	Suund (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Määrab, millised stiilid rakenduvad enne ja pärast animatsiooni.
animation-play-state	Määrab, kas animatsioon töötab või on peatatud.