Редактор плавности cubic-bézier
Создавайте собственные кривые плавности cubic-bezier с помощью перетаскиваемого редактора и предпросмотра анимации.
Перетаскивайте два маркера, чтобы задать кривую плавности.
transition-timing-function: —;
animation-timing-function: —;
Всё выполняется в вашем браузере — ничего не загружается.
О Редактор плавности cubic-bézier
Редактор кривых Cubic-Bézier создаёт пользовательские функции синхронизации для переходов и анимаций CSS. Перетащите два маркера управления на холсте с кривой, и значение cubic-bezier(x1, y1, x2, y2) обновляется в реальном времени; превью анимации воспроизводит выбранную функцию рядом с линейным эталоном, чтобы вы могли почувствовать разницу, с настраиваемой продолжительностью и мгновенным повтором.
Десять пресетов охватывают распространённый набор: стандартный ease, ease-in, ease-out и ease-in-out, а также выразительные кривые вроде back и anticipate, которые выходят за пределы своих конечных точек, и материальные ускоряющие и замедляющие рампы. Используйте их как есть или как отправную точку для дальнейшего перетаскивания в собственный вариант.
Вы также можете вводить точные координаты контрольных точек, нажать «randomize» для вдохновения и скопировать либо чистое значение cubic-bezier(), либо готовое к вставке правило CSS. Весь редактор работает в вашем браузере.
Как использовать Редактор плавности cubic-bézier
- Перетащите два маркера в редакторе кривой, чтобы задать форму функции синхронизации.
- Нажмите Replay и сравните анимацию с выбранной функцией с линейным эталоном, при необходимости настроив продолжительность.
- Попробуйте пресеты — ease, back, anticipate, material и другие — для быстрой отправной точки.
- Точно настройте с помощью числовых полей ввода контрольных точек для получения точных значений.
- Скопируйте значение cubic-bezier() или полный фрагмент CSS.