Для чего нужны 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: