Редактор cubic-bezier()

• Перетащите точки P1 и P2 на графике или введите их координаты. Щелчок по пустому месту графика переносит туда ближайшую точку. С клавиатуры точку двигают стрелки, с Shift шаг больше.
• Предпросмотр повторяет движение по кругу. Точка на кривой показывает текущий момент: сколько прошло времени и какая доля пути пройдена. Выберите, что анимировать — положение, ширину, масштаб или прозрачность.
• Дорожки сравнения запускаются одновременно с вашей кривой. Название дорожки — кнопка: она берёт эту кривую для правки.
• Готовые кривые сгруппированы по силе: от мягкой sine до резкой expo, отдельно — замах, перелёт и пружина, а во вкладке «Интерфейс» — кривые дизайн-систем Material Design, Fluent и IBM Carbon. Кнопка «Сохранить кривую» под сравнением добавляет кривую во вкладку «Мои» — она хранится в этом браузере.
• Из генератора анимаций редактор открывается ссылкой у плавности анимации или отдельного кадра. Кнопка «Применить в генераторе анимаций» вернёт туда новую кривую.

По горизонтали откладывается время, по вертикали — пройденная доля изменения. Кривая всегда начинается в точке (0, 0) и заканчивается в (1, 1), а cubic-bezier(x1, y1, x2, y2) задаёт две управляющие точки между ними. Крутой участок — быстрое движение, пологий — медленное. Ключевые слова — тоже кривые: ease это cubic-bezier(0.25, 0.1, 0.25, 1), linear — прямая.

Координата x должна быть от 0 до 1, иначе время шло бы назад и браузер отбросит значение. y может выходить за пределы: меньше 0 — элемент сначала отходит назад, больше 1 — перелетает цель и возвращается. Так получаются замах и пружина. Кривая из двух точек даёт не больше одного перелёта; несколько затухающих колебаний делают несколькими ключевыми кадрами или функцией linear() с набором точек.

Одна и та же функция подходит для transition-timing-function и animation-timing-function. В анимации она действует между соседними ключевыми кадрами, а не на всю анимацию сразу. Подробнее — в статьях «Переходные эффекты» и @keyframes.