За какво са нужни 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	Определя дали анимацията е в изпълнение или на пауза.