CSS Easing Генератор
Редактор кривых Безье
Просмотр анимации
Распространённые эффекты ускорения
Бесплатный онлайн-генератор CSS easing. Перетаскивайте контрольные точки для создания кривых cubic-bezier. Встроенные предустановки ease, ease-in, ease-out, ease-in-out и linear. Предпросмотр анимации в реальном времени.
Советы и хитрости
Перетаскивание контрольных точек
Перетаскивайте две контрольные точки (P1, P2) непосредственно на кривой для регулировки кривой ускорения в реальном времени. Ось X представляет ход времени, ось Y — изменение свойства, а наклон кривой определяет изменение скорости анимации.
Предпросмотр анимации в реальном времени
Нажмите «Воспроизвести анимацию», чтобы увидеть, как мяч движется по траектории функции ускорения. Индикатор прогресса наглядно показывает ход времени.
Копирование одним кликом CSS
После настройки нажмите кнопку «Копировать», чтобы автоматически скопировать код CSS cubic-bezier() в буфер обмена, готовый для вставки прямо в ваш проект.
Распространённые варианты использования
Анимация появления
ease-out
Анимация исчезновения
ease-in
Переходы
ease-in-out
Эффекты наведения
Пользовательские кривые
Индикаторы прогресса
linear
ЧаВо
Что такое cubic-bezier?
cubic-bezier — это CSS-функция, определяющая кривую скорости анимации, описываемую кубической кривой Безье через две контрольные точки: P1 (x1, y1) и P2 (x2, y2). Ось X кривой представляет ход времени (0→1), а ось Y — изменение свойства (0→1). Более крутая кривая означает более высокую скорость; более пологая — более низкую.
Как использовать кастомное ускорение в CSS?
Используйте его непосредственно в CSS-свойствах transition или animation: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);. Область вывода кода генератора автоматически создаёт правильный CSS-код. Нажмите копировать, чтобы вставить и использовать его напрямую.
Каковы допустимые диапазоны для X и Y?
CSS cubic-bezier() требует, чтобы значения X находились между 0 и 1 (соответствует времени от начала до конца), а значения Y обычно находятся между 0 и 1, но могут выходить за этот диапазон (для создания эффектов отскока). Этот инструмент ограничивает X до [0, 1] и Y до [0, 1], чтобы гарантировать, что сгенерированные кривые являются допустимыми CSS-функциями ускорения.
В чем разница между предустановленными ускорениями?
ease: Быстро затем медленно затем быстро, подходит для общих переходов.
ease-in: Медленно к быстро, подходит для анимаций исчезновения (элементы покидают).
ease-out: Быстро к медленно, подходит для анимаций появления (элементы входят), наиболее часто используемое ускорение.
ease-in-out: Медленно на обоих концах, быстро в середине, более плавное, чем ease.
linear: Постоянная скорость, подходит для анимаций, не требующих ускорения.