Генератор CSS Cubic Bezier
Перетаскивайте маркеры для настройки кривой плавности, сравнивайте движение с линейным шаблоном и копируйте значение cubic-bezier().
cubic-bezier(0.25, 0.1, 0.25, 1)Кривая отрисовывается прямо в вашем браузере. Никакие заданные вами параметры не отправляются на BroBroGo.
Частые вопросы
Что означают два маркера и четыре числа?
Кривая идет из левого нижнего угла (старт) в правый верхний (финиш), где время идет слева направо, а прогресс — снизу вверх. Два маркера — это управляющие точки, которые изгибают кривую. Каждый маркер имеет координаты X и Y, формируя запись cubic-bezier(x1, y1, x2, y2). Координата X всегда находится в пределах от 0 до 1, тогда как Y может выходить за рамки (выше 1 или ниже 0), создавая эффект выхода за границы или отката назад перед стабилизацией.
Как использовать полученное значение в CSS?
Скопируйте функцию cubic-bezier() и вставьте ее туда, где задается функция плавности — например, в transition-timing-function, animation-timing-function или в сокращенное свойство: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Ключевые слова ease, ease-in, ease-out и ease-in-out — это просто фиксированные кривые Безье, поэтому выбор этих пресетов покажет точные значения, скрывающиеся за ключевыми словами.
Можно ли создать эффект отскока или эластичности?
Сама по себе — нет. Одиночная кривая Безье может создавать эффект предвосхищения и выхода за рамки (пресеты «back» вытягивают один из маркеров за пределы сетки именно для этого), но движение может идти только в одну сторону с последующим затуханием. Эффекты отскока (bounce) или эластичности требуют смены направления движения несколько раз, что невозможно описать одной кривой cubic-bezier; для этого нужны CSS keyframes или функция linear() с множеством опорных точек.