Об инструменте: Редактор CSS cubic-bezier
Настройте CSS cubic-bezier, посмотрите кривую и управляющие точки, скопируйте функцию времени перехода.
Кривая начинается в (0,0) и заканчивается в (1,1). Обе координаты x управляющих точек должны лежать от 0 до 1; координаты y могут выходить за эти границы для эффекта перелета. На графике показаны управляющие отрезки и линейная диагональ для сравнения. Результат можно использовать в CSS-переходе или анимации.
Как устроен расчет
Разобранный пример
| x₁ | 0.25 |
| y₁ | 0.1 |
| x₂ | 0.25 |
| y₂ | 1 |
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
Вопросы и ответы
Что делает этот инструмент?
Настройте CSS cubic-bezier, посмотрите кривую и управляющие точки, скопируйте функцию времени перехода. Кривая начинается в (0,0) и заканчивается в (1,1). Обе координаты x управляющих точек должны лежать от 0 до 1; координаты y могут выходить за эти границы для эффекта перелета. На графике показаны управляющие отрезки и линейная диагональ для сравнения. Результат можно использовать в CSS-переходе или анимации.
От чего зависят точность и формат ввода?
Кривая начинается в (0,0) и заканчивается в (1,1).
Где выполняются расчеты?
Вычисления выполняются в вашем браузере. Для работы с инструментом не требуется установка программ.
Asted Cloud
Комментарии (0)
Оставьте отзыв — пожалуйста, будьте вежливы и по теме.
Войти, чтобы комментировать