Kam skirti keyframes ir kaip jie veikia?

@keyframes — CSS taisyklė, apibrėžianti pagrindinius animacijos kadrus. Ji leidžia sukurti elemento būsenų seką skirtingais laiko taškais, kuriuos naršyklė sklandžiai perjungs, sukurdama judėjimo efektą. Tai daroma nustatant stilių rinkinį tam tikru procentiniu laiku (nuo 0% iki 100%) arba naudojant žodžius from (0%) ir to (100%).

Norint naudoti keyframes, reikia:

1. Apibrėžti @keyframes taisyklę su unikaliu pavadinimu.
2. @keyframes viduje nurodyti stilius skirtingiems laiko žymekliams (procentais arba from/to).
3. Taikyti sukurtą animaciją elementui naudojant CSS savybę animation.

@keyframes slidein {
  from {
    transform: translateX(0%); // Pradinė būsena: be poslinkio X ašyje
  }

  to {
    transform: translateX(100%); // Galutinė būsena: poslinkis 100% X ašyje
  }
}

.element {
  animation-name: slidein; // Animacijos pavadinimas, apibrėžtas aukščiau
  animation-duration: 3s; // Vieno ciklo trukmė
  animation-timing-function: ease-in-out; // Greičio funkcija
  animation-delay: 1s; // Užlaikymas prieš pradžią
  animation-iteration-count: infinite; // Kartojimų skaičius
  animation-direction: alternate; // Animacijos kryptis
}

Pagrindinės animation savybės, naudojamos kartu su @keyframes:

Savybė	Aprašymas
animation-name	@keyframes pavadinimas, kurį reikia taikyti.
animation-duration	Vieno ciklo trukmė (pvz., 2s, 500ms).
animation-timing-function	Greičio funkcija (pvz., linear, ease, ease-in, cubic-bezier).
animation-delay	Užlaikymas prieš pradžią (pvz., 1s).
animation-iteration-count	Kartojimų skaičius (infinite – begalinis).
animation-direction	Kryptis (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Nustato, kokie stiliai taikomi elementui prieš ir po animacijos.
animation-play-state	Nustato, ar animacija vyksta ar sustabdyta.