Генератор кривой плавности cubic-bezier с анимацией

Как пользоваться

Перетащите Контрольная точка 1 или Контрольная точка 2 на графике. Щёлкните точку и используйте стрелки для небольших шагов; с Shift шаги больше.
Введите точные значения в x1 (от 0 до 1), y1, x2 (от 0 до 1) и y2, если нужна точная кривая. Значения x должны оставаться от 0 до 1.
Нажмите готовый набор, например ease-in-out, или нажмите Воспроизвести под Предпросмотр анимации, чтобы увидеть, как шарик движется по кривой.
Скопируйте объявление CSS и используйте его в переходе или анимации.

Что означают четыре числа

Кривая плавности cubic-bezier начинается в точке (0, 0) и заканчивается в (1, 1). Её две контрольные точки, (x1, y1) и (x2, y2), задают форму. По горизонтальной оси откладывается доля прошедшего времени, по вертикальной — доля выполненного изменения. Спецификация CSS Easing Functions (на английском) ограничивает значения x контрольных точек диапазоном от 0 до 1, потому что время не может идти назад или выходить за конец.

Значения y ничем не ограничены. Значение y больше 1 или меньше 0 заставляет кривую выйти за пределы, поэтому изменение проходит конец и возвращается либо сначала движется в обратную сторону.

cubic-bezier(x1, y1, x2, y2), где x1 и x2 лежат между 0 и 1

Готовые наборы и анимация

Ключевое слово ease — это cubic-bezier(0.25, 0.1, 0.25, 1), ease-in — cubic-bezier(0.42, 0, 1, 1), ease-out — cubic-bezier(0, 0, 0.58, 1), а ease-in-out — cubic-bezier(0.42, 0, 0.58, 1), как их даёт спецификация. Линейная плавность — это прямая, которую рисует и кривая cubic-bezier(0, 0, 1, 1).

Шарик проходит кривую как тайминг анимации, поэтому плавность видна как движение. Если устройство просит уменьшить движение, анимация начинается на паузе, а запускает её кнопка «Воспроизвести».

Используйте мягкую кривую, например ease-out, для элемента, который появляется на странице, и ease-in для того, который уходит.
Делайте переход коротким, чтобы плавность ощущалась, а не ожидалась.

Пример: прогресс на половине времени

Кривая ease-in-out, cubic-bezier(0.42, 0, 0.58, 1), симметрична относительно своего центра, поэтому на половине времени она выполняет ровно половину изменения: индикатор показывает 0,5000.

Кривая ease, cubic-bezier(0.25, 0.1, 0.25, 1), в той же точке уже дальше. На половине времени она выполняет 0,8024 изменения, поэтому вначале движется быстро и замедляется к концу.

Частые вопросы

Что показывает шарик?

Шарик движется от левого края дорожки к правому, и его положение следует за кривой: горизонтальное положение — это доля выполненного изменения. Когда кривая поднимается выше 1, шарик проходит конец дорожки и обрезается там.

Почему значения x нельзя выводить за пределы 0 и 1?

Горизонтальная ось — это время, а кривая охватывает время от начала до конца. Время до начала или после конца не имеет места на кривой, поэтому спецификация держит значения x контрольных точек между 0 и 1. Значения y такого ограничения не имеют.

В чём разница между ease-in и ease-out?

ease-in начинается медленно и ускоряется к концу, а ease-out начинается быстро и замедляется в конце. Эти кривые — зеркальные отражения друг друга, поэтому одно и то же изменение читается в обратном порядке.

Можно ли использовать значение и в анимации, и в переходе?

Да. Одно и то же значение cubic-bezier() работает и для animation-timing-function, и для transition-timing-function, поэтому объявление подходит для любого из них.

Отправляется ли что-нибудь, что я перетаскиваю или ввожу, на сервер?

Нет. Кривая и анимация создаются в вашем браузере. Ничего не сохраняется и не отправляется на наш сервер, поэтому скопируйте объявление до того, как уйдёте со страницы.

Источники

Цифры и текст в последний раз проверены вторник, 10 ноября 2026 г..