Kam ir nepieciešami keyframes un kā tie darbojas?

@keyframes — CSS noteikums, kas definē galvenos kadros animācijai. Tas ļauj izveidot elementa stāvokļu secību dažādos laika punktos, kurus pārlūkprogramma gludi pārvērš, radot kustības efektu. Tas tiek darīts, noteicot stilu kopumu noteiktā procentuālā laikā (no 0% līdz 100%) vai izmantojot vārdus from (0%) un to (100%).

Lai izmantotu keyframes, nepieciešams:

1. Definēt @keyframes noteikumu ar unikālu nosaukumu.
2. @keyframes iekšpusē norādīt stilus dažādiem laika marķieriem (procentos vai from/to).
3. Pielietot izveidoto animāciju elementam ar CSS īpašību animation.

@keyframes slidein {
  from {
    transform: translateX(0%); // Sākuma stāvoklis: bez pārvietošanas X virzienā
  }

  to {
    transform: translateX(100%); // Beigu stāvoklis: pārvietojums par 100% X virzienā
  }
}

.element {
  animation-name: slidein; // Animācijas nosaukums, kas iepriekš definēts
  animation-duration: 3s; // Viena cikla ilgums
  animation-timing-function: ease-in-out; // Animācijas ātruma funkcija
  animation-delay: 1s; // Aizkave pirms sākuma
  animation-iteration-count: infinite; // Atkārtojumu skaits
  animation-direction: alternate; // Animācijas virziens
}

Galvenās īpašības animation, kas tiek izmantotas kopā ar @keyframes:

Īpašība	Apraksts
animation-name	@keyframes nosaukums, kas jālieto.
animation-duration	Viena cikla ilgums (piemēram, 2s, 500ms).
animation-timing-function	Ātruma funkcija (piemēram, linear, ease, ease-in, cubic-bezier).
animation-delay	Aizkave pirms sākuma (piemēram, 1s).
animation-iteration-count	Atkārtojumu skaits (infinite – bezgalīgs).
animation-direction	Virziens (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Nosaka, kādi stili tiek piemēroti elementam pirms un pēc animācijas.
animation-play-state	Nosaka, vai animācija ir aktīva vai pauzēta.