Генератор CSS-плавности (cubic-bezier)
Перетаскивайте два маркера, чтобы задать форму кривой плавности, смотрите, как мяч в
реальном времени показывает анимацию, и скопируйте значение cubic-bezier().
Пресеты
Как это работает
На графике по вертикали отложен прогресс, по горизонтали — время за один секундный
интервал. Оба маркера можно перетаскивать напрямую, а числовые поля под графиком всегда
остаются с ними синхронизированы в любую сторону; тащите мышью или пальцем либо вводите
точные значения, если нужно повторить конкретную кривую. Те же четыре числа задают и
SVG-путь, который вы видите, и настоящее свойство
transition-timing-function, применённое к мячу предпросмотра, так что перед
вами реальная функция плавности, а не приближение.
Всё работает на встроенном CSS-движке переходов вашего браузера. Никакие данные о состоянии анимации или кривой никуда не отправляются.
Частые вопросы
Что контролируют два маркера?
Кривая плавности cubic-bezier задаётся двумя контрольными точками, у каждой из которых есть координата x (время, от 0 до 1) и y (прогресс, не ограничен, но обычно от 0 до 1). Перетаскивание маркера напрямую задаёт эту точку; четыре показанных числа — это именно то, что подставляется внутрь cubic-bezier().
Может ли кривая выходить за пределы 100%?
Да, если значение y контрольной точки становится больше 1 или меньше 0, анимация ненадолго проскочит конечное значение или опустится ниже начального перед тем, как остановиться, — это эффект «отскока» или «замаха». Перетащите маркер выше или ниже графика, чтобы попробовать.
Отправляется ли это куда-либо?
Нет, кривая и анимация предпросмотра полностью работают в CSS-движке вашего браузера. Ничего не загружается.