Почему x ограничен диапазоном 0–1, а y нет?

x — это время, а CSS-анимация не может идти назад или выйти за пределы своей длительности, поэтому браузер обрезает любой x за пределами 0–1. y — прогресс анимируемого свойства, и ничто не мешает кривой на мгновение превысить 100% или уйти ниже 0% — именно так работают эффекты отскока и «замаха».

Как сделать эффект отскока или проскока?

Потяните вторую контрольную точку выше y = 1. Значение y2 около 1,2–1,5 заставит анимируемый элемент проскочить целевое положение и вернуться обратно — получится мягкий отскок. Для эффекта «замаха» — небольшого движения назад перед основным — потяните первую контрольную точку ниже y = 0.

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

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

Можно ли использовать свою кривую cubic-bezier() не только в transition, но и в анимации?

Да. cubic-bezier() работает везде, где допустима timing-функция: в свойстве transition-timing-function, в animation-timing-function и в timing-функциях отдельных кадров внутри блока @keyframes.

Отправляется ли превью на сервер?

Нет. График, анимация шарика и генерация CSS работают полностью локально, в вашей вкладке браузера. Ничего из настроенной кривой никуда не загружается и не сохраняется.

Генератор кривых cubic-bezier — свои кривые CSS-анимации

Превью

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Визуальный редактор для функции плавности CSS cubic-bezier(). Перетаскивайте две контрольные точки на графике, чтобы задать форму кривой, начните с одного из стандартных пресетов ease и смотрите, как шарик скользит по дорожке превью с вашей кривой. Когда движение выглядит так, как нужно, скопируйте готовое объявление timing-function прямо в свой CSS.

Как это работает

1
Начните с пресета Нажмите ease, ease-in, ease-out, ease-in-out или linear, чтобы загрузить его контрольные точки как основу, а затем подстройте форму под себя.
2
Перетащите контрольные точки Каждая точка задаёт, насколько резко анимация ускоряется у своего конца кривой. Потяните точку выше графика — получится проскок за целевое значение, ниже — лёгкий отскок назад перед началом движения.
3
Проверьте и скопируйте Нажмите «Играть», чтобы шарик проехал по дорожке с вашей кривой, применённой как настоящий CSS-переход. Скопируйте значение cubic-bezier(), когда движение понравится.

Ваши данные защищены

Всё обрабатывается прямо в вашем браузере. Никакие файлы или текст не отправляются на наши серверы. Отключите интернет — инструмент продолжит работать.

Часто задаваемые вопросы

Что означают четыре числа в cubic-bezier()?: Это координаты x и y двух контрольных точек: cubic-bezier(x1, y1, x2, y2). Кривая всегда начинается в точке (0, 0) и заканчивается в (1, 1) — эти концы зафиксированы спецификацией и не входят в четыре значения. x означает прошедшее время, y — прогресс анимации.
Почему x ограничен диапазоном 0–1, а y нет?: x — это время, а CSS-анимация не может идти назад или выйти за пределы своей длительности, поэтому браузер обрезает любой x за пределами 0–1. y — прогресс анимируемого свойства, и ничто не мешает кривой на мгновение превысить 100% или уйти ниже 0% — именно так работают эффекты отскока и «замаха».
Как сделать эффект отскока или проскока?: Потяните вторую контрольную точку выше y = 1. Значение y2 около 1,2–1,5 заставит анимируемый элемент проскочить целевое положение и вернуться обратно — получится мягкий отскок. Для эффекта «замаха» — небольшого движения назад перед основным — потяните первую контрольную точку ниже y = 0.
В чём разница между ease и ease-in-out?: ease — значение по умолчанию в CSS — начинается быстро и плавно замедляется к концу, что подходит большинству UI-переходов вроде наведения и выпадающих меню. ease-in-out более симметричен: он постепенно разгоняется от полной остановки и так же постепенно тормозит в конце — это выглядит спокойнее и механичнее, хороший выбор для модальных окон и крупных изменений раскладки.
Можно ли использовать свою кривую cubic-bezier() не только в transition, но и в анимации?: Да. cubic-bezier() работает везде, где допустима timing-функция: в свойстве transition-timing-function, в animation-timing-function и в timing-функциях отдельных кадров внутри блока @keyframes.
Отправляется ли превью на сервер?: Нет. График, анимация шарика и генерация CSS работают полностью локально, в вашей вкладке браузера. Ничего из настроенной кривой никуда не загружается и не сохраняется.

Из блога

CSS cubic-bezier(): как на самом деле работают кривые плавности Что означают четыре числа в cubic-bezier(), как построить эффекты проскока и «замаха» и когда достаточно встроенных ключевых слов ease. Читать статью →

Генератор кривых cubic-bezier — свои кривые CSS-анимации

Как это работает

Ваши данные защищены

Часто задаваемые вопросы

Из блога

Похожие инструменты