Функция плавности

Анимация длится, допустим, 300 миллисекунд. Функция плавности решает, какая часть пути будет пройдена к каждому моменту. При линейной функции элемент движется с постоянной скоростью и выглядит механически. Реальные предметы так не двигаются: они разгоняются и тормозят. Поэтому по умолчанию и у CSS-переходов, и у анимаций стоит функция ease — быстрый старт и мягкая остановка.

Задаётся она свойствами transition-timing-function и animation-timing-function или последним параметром в сокращённых записях. В Web Animations API то же самое передаётся опцией easing метода element.animate().

Какие бывают значения

• linear — равномерно. Подходит для вращения индикатора загрузки и смены цвета.
• ease-out — быстро начинается и плавно останавливается. Хорош для появления элементов: меню, всплывающей подсказки.
• ease-in — разгон к концу. Уместен для исчезновения: элемент «уходит» со сцены.
• ease-in-out — плавно с обеих сторон, для перемещений внутри экрана.
• cubic-bezier(x1, y1, x2, y2) — своя кривая по двум опорным точкам. Координаты X должны лежать от 0 до 1, а Y может выходить за пределы — тогда элемент немного «перелетает» цель и возвращается.
• steps(n) — скачками, без промежуточных значений: для покадровой анимации из спрайта или эффекта печатной машинки.
• linear(…) — кусочно-линейная функция по списку точек; появилась в браузерах сравнительно недавно и позволяет описать пружину или отскок.

Пример

.menu {
  transform: translateY(-8px);
  opacity: 0;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1),
              opacity .2s ease-out;
}
.menu.is-open { transform: none; opacity: 1; }

.loader { animation: spin 1s steps(8) infinite; }

@media (prefers-reduced-motion: reduce) {
  .menu { transition: none; }
}

Тонкости

В анимациях с ключевыми кадрами функция плавности применяется не ко всей анимации, а к каждому отрезку между соседними кадрами. Анимация из пяти кадров с ease будет пять раз разгоняться и тормозить — часто это и есть причина «дёрганого» движения. Если нужна одна кривая на весь путь, функцию задают в самих кадрах или сокращают их число.

Подбирать кривую удобнее визуально: в инструментах разработчика Chrome и Firefox рядом с cubic-bezier есть редактор, где точки можно тянуть мышью и сразу видеть результат. И не забывайте про пользователей, которые отключили анимации в системе: медиафункция prefers-reduced-motion позволяет убрать движение для них.