Селектор ключевого кадра

Анимация в CSS описывается как набор опорных состояний, а браузер сам достраивает промежуточные. Селектор ключевого кадра говорит, где на шкале времени стоит каждое состояние. Проценты отсчитываются от длительности, заданной в animation-duration: при длительности 2 секунды кадр 25% наступит через полсекунды. Слово from равно 0%, to — 100%.

Сам кадр — содержимое фигурных скобок после селектора, о нём отдельно в статье про ключевой кадр. Здесь речь именно о метке времени и правилах её записи.

Правила записи

• Несколько селекторов можно перечислить через запятую, если состояния совпадают: 0%, 100% { … }.
• Порядок блоков внутри @keyframes не важен — браузер сортирует их по времени. Но читать удобнее по возрастанию.
• Значения меньше 0% или больше 100% недопустимы, такой кадр игнорируется.
• Если начальный или конечный кадр не указан, браузер берёт текущие вычисленные значения свойств элемента.
• Декларации с !important внутри кадров игнорируются.

Пример: пульсирующая кнопка

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.06); }
  60%      { transform: scale(0.98); }
}

.cta {
  animation: pulse 2.4s ease-in-out infinite;
}

Кадры 0% и 100% объединены, поэтому цикл замыкается без рывка. Между 40% и 60% кнопка коротко «отскакивает».

Плавность на отдельных отрезках

Внутри кадра можно указать animation-timing-function. Она действует на отрезок от этого кадра до следующего, а не на всю анимацию. Так делают, например, «прыгающий мяч»: падение ускоряется, подъём замедляется. Подробнее о кривых — в статье про функцию плавности. Если анимация бесконечная и заметная, её стоит отключать для пользователей с настройкой prefers-reduced-motion: reduce.