Конвертер цветов
Преобразуйте HEX, RGB и HSL с прозрачностью, смотрите образец цвета и копируйте готовые значения CSS.
Редактор CSS-кривых cubic-bezier
Настройте две контрольные точки, проверьте переход в движении и получите функцию плавности cubic-bezier.
X ограничен диапазоном 0–1, Y может выходить за него. Используйте мышь или стрелки; Shift увеличивает шаг.
CSS
Об инструменте
Подберите ускорение или выход за конечную точку перехода по кривой и предпросмотру.
Как пользоваться
Начните с готовой кривой, перетащите контрольные точки или введите X1, Y1, X2 и Y2. Точки также перемещаются стрелками, с Shift — крупнее. Задайте длительность предпросмотра, запустите или остановите воспроизведение, затем скопируйте или скачайте CSS.
Для X допустимы 0–1, для Y — −2–3, поэтому можно создавать упреждающее движение и выход за конечную точку. Экспорт содержит только функцию перехода, без длительности и полной анимации. Системная настройка уменьшения движения отключает воспроизведение, но не редактирование и экспорт.
Частые вопросы
Экспортируется ли полная анимация?
Только transition-timing-function. Длительность и анимируемые свойства задаются в стилях. x допускается от 0 до 1, y — от −2 до 3.
Почему при воспроизведении нет движения, хотя кривая корректна?
Предпросмотр учитывает системную настройку уменьшения движения. Если она включена, анимация перемещения не запускается, но кривую можно редактировать и экспортировать. В остальных случаях проверьте длительность: она должна быть от 100 до 5 000 мс и влияет только на предпросмотр.
Связанные инструменты
Откроется в новой вкладке
Комментарии
0