Кадровая анимация

Плавные эффекты в интерфейсе строятся двумя способами. CSS-переход анимирует смену одного состояния другим и запускается этой сменой — наведением, добавлением класса. Кадровая анимация самостоятельна: она может стартовать сразу при загрузке, повторяться бесконечно, проходить через несколько промежуточных точек. В CSS её задают правилом @keyframes и свойством animation.

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

@keyframes pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgb(220 50 50 / .5); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 10px rgb(220 50 50 / 0); }
}
.cta {
  animation: pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cta { animation: none; }
}

Каждая точка в процентах — ключевой кадр; слова from и to — синонимы 0% и 100%. Между кадрами браузер рассчитывает значения по функции плавности.

Параметры animation

• animation-duration и animation-delay — длительность и задержка;
• animation-iteration-count — число повторов или infinite;
• animation-direction — значение alternate проигрывает анимацию туда и обратно;
• animation-fill-mode — forwards оставляет элемент в состоянии последнего кадра, иначе после окончания он вернётся к исходным стилям;
• animation-play-state — пауза, например при наведении.

Как избежать рывков

Плавнее всего анимируются transform и opacity: браузер может обработать их на этапе композитинга, не пересчитывая раскладку. Анимация width, top или margin заставляет пересчитывать геометрию на каждом кадре и на слабых телефонах дёргается. Людям, которым движение на экране доставляет дискомфорт, система позволяет включить уменьшение движения, — медиазапрос prefers-reduced-motion в примере отключает пульсацию для них. Из JavaScript похожую анимацию запускают методом element.animate(), передав массив кадров и параметры, — это Web Animations API.