Зашто су потребни keyframes и како они раде?

@keyframes — CSS правило које дефинише кључне кадрове анимације. Омогућава креирање последователних стања елемента у различитим временским тренуцима, које прегледач ће постепено прелазити, стварајући ефекат кретања. Ради се путем одређивања сета стилова за елемент у одређеним процентима времена (од 0% до 100%) или коришћењем кључних речи from (0%) и to (100%).

Да бисте користили keyframes, потребно је:

1. Дефинисати правило @keyframes са јединственим именом.
2. Унутар @keyframes навести стилове за различите временске ознаке (у процентима или from/to).
3. Примени створену анимацију на елемент помоћу CSS својства animation.

@keyframes slidein {
  from {
    transform: translateX(0%); // Почетно стање: без померања по X
  }

  to {
    transform: translateX(100%); // Крајње стање: померање за 100% по X
  }
}

.element {
  animation-name: slidein; // Име анимације, дефинисано изнад
  animation-duration: 3s; // Трајање једног циклуса анимације
  animation-timing-function: ease-in-out; // Функција брзине анимације
  animation-delay: 1s; // Закашњење пре почетка анимације
  animation-iteration-count: infinite; // Број понављања
  animation-direction: alternate; // Правец анимације
}

Основна својства animation која се користе заједно са @keyframes:

Свойство	Опис
animation-name	Име @keyframes које треба применити.
animation-duration	Трајање једног циклуса анимације (нпр. 2s, 500ms).
animation-timing-function	Функција брзине анимације (нпр. linear, ease, ease-in, cubic-bezier).
animation-delay	Закашњење пре почетка анимације (нпр. 1s).
animation-iteration-count	Број понављања анимације (infinite за бесконачно понављање).
animation-direction	Правец анимације (normal, reverse, alternate, alternate-reverse).
animation-fill-mode	Одређује које стилове примењује на елемент пре и после извршења анимације.
animation-play-state	Одређује да ли је анимација у току или паузирана.