Редактор кривых Безье CSS
Показывает кривые плавности и экспортирует функции времени.
Как использовать Редактор кривых Безье CSS
CSS cubic Bezier editor builds a cubic-bezier() timing function from two control points and animates a ball with it so you can see the easing. The x values range from 0 to 1, the y values from -3 to 3 for overshoot or anticipation, and the preview duration from 0.1 to 10 seconds. Download the result as a transition-timing-function rule in easing.css.
- Введите запрошенные значения в панели настроек.
- Настройте основные параметры, затем откройте расширенный режим для экспорта и точной настройки. Пользовательские настройки остаются активными при закрытии панели.
- Запустите «Редактор кривых Безье CSS», просмотрите результат и используйте доступные элементы копирования или скачивания.
Что поддерживает этот инструмент
Показывает кривые плавности и экспортирует функции времени.
- Контрольная точка x1
- Range: 0 to 1
- Контрольная точка y1
- Range: -3 to 3
- Контрольная точка x2
- Range: 0 to 1
- Контрольная точка y2
- Range: -3 to 3
- Длительность предпросмотра (секунды)
- Range: 0.1 to 10
Ограничения и обработка
Изображения используют существующее ограничение холста в 32 мегапикселя. Поддерживается до 100 исходных изображений, где это предусмотрено. Вставленный HTML ограничен 200 000 символов; диаграммы Mermaid — 20 000 символов и 300 строк. Для создания SVG и PNG требуется браузер.
Частые вопросы
Why are the x values limited to 0 to 1 in cubic-bezier?
CSS requires both x coordinates to stay between 0 and 1 so time always moves forward; values outside that range make the function invalid. The y values can go beyond that range, and this editor accepts -3 to 3.
How do I make a bounce or overshoot easing curve?
Set y2 above 1, for example 1.5, so the motion passes the end point before settling, or set y1 below 0 to pull back before starting. The ball preview loops back and forth so you can judge the effect.
Does the easing preview respect reduced motion settings?
Yes. When your system requests reduced motion, the preview animation is turned off. The cubic-bezier value is still generated and downloadable; change the setting temporarily if you need to watch the curve in motion.
Где обрабатываются мои данные?
Эта операция обрабатывает исходные данные в вашем браузере. Копирование и скачивание выполняются только по вашему действию; входные данные не сохраняются в учётной записи или истории.
Каковы ограничения входных данных?
Изображения используют существующее ограничение холста в 32 мегапикселя. Поддерживается до 100 исходных изображений, где это предусмотрено. Вставленный HTML ограничен 200 000 символов; диаграммы Mermaid — 20 000 символов и 300 строк. Для создания SVG и PNG требуется браузер.