Cubic-bezier: кривая плавности для CSS
Потяните за контрольные точки и получите свою cubic-bezier() для transition-timing-function или animation-timing-function.
Похожие инструменты
Другие полезные инструменты из той же категории
Часто задаваемые вопросы
Это функция, которая описывает скорость анимации во времени. Она принимает четыре числа — координаты двух контрольных точек: cubic-bezier(0.4, 0, 0.2, 1). Именно она решает, разгоняется движение плавно или дёргается. Стандартные ease, ease-in, ease-out — просто готовые cubic-bezier с заранее заданными числами.
Linear идёт с постоянной скоростью — движение выглядит механическим. Ease-in начинается медленно и разгоняется, ease-out наоборот тормозит к концу, ease-in-out делает и то и другое. Ease — значение по умолчанию, чуть более резкое на старте, чем ease-in-out. Для интерфейса чаще всего нужен ease-out: элемент влетает быстро и мягко останавливается.
Точек две: первая (P1) задаёт разгон в начале, вторая (P2) — торможение в конце. Чем дальше точка от своего края, тем сильнее эффект. Значения по X всегда лежат в диапазоне от 0 до 1, а вот по Y могут выходить за пределы — так получают эффект «отскока», когда элемент чуть перелетает цель и возвращается.
В обоих. Для переходов это свойство transition-timing-function (или четвёртое значение в сокращённой записи transition), для анимаций — animation-timing-function. Синтаксис одинаковый: transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1).
Для эффекта отскока используйте значения за пределами диапазона 0-1, например cubic-bezier(0.68, -0.55, 0.265, 1.55). Отрицательные значения создают "провал" перед анимацией, значения больше 1 создают "перелёт".