Генератор cubic-bezier (CSS easing)
Рисуйте кривые анимации cubic-bezier, перетаскивая контрольные точки, сравнивайте с ease, ease-in-out и другими готовыми кривыми и копируйте CSS перехода.
Как пользоватьсяРедактор кривой cubic-bezier
Доступно на: 
Генератор cubic-bezier (CSS easing): для чего нужен
Перетащите две контрольные точки на графике или выберите готовую кривую, например ease, пружина и замах. Настройте длительность и сравните анимацию вашей кривой с линейной, прежде чем копировать CSS для transition или animation.
Как пользоваться
- Выберите шаблон или перетащите точки.
- Задайте длительность и проверьте анимацию.
- Скопируйте CSS.
Когда использовать
- Создание более естественных анимаций в интерфейсах.
- Настройка переходов меню и модальных окон.
- Изучение функций easing.
Частые вопросы
Что такое cubic-bezier?
Это функция, задающая ускорение CSS-перехода или анимации. Четыре числа — координаты x и y двух контрольных точек; x лежит от 0 до 1, а y может выходить за эти пределы, создавая эффект пружины.
Какую кривую использовать в интерфейсах?
Для элементов, которые входят на экран, более естественно выглядят кривые, замедляющиеся в конце, например cubic-bezier(0.22, 1, 0.36, 1). Для выхода предпочтительны кривые, ускоряющиеся, как ease-in.
Правда бесплатно?
Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.