Перейти к содержимому
Toolars
Каталог
Сообщить об ошибке

Дизайн · утилита · Локально

Генератор CSS cubic-bezier

CSS Cubic Bezier Generator

Стройте кривые easing перетаскиванием опорных точек, смотрите живой предпросмотр анимации на своей длительности и копируйте cubic-bezier().

Путь задачи / от ввода к результату

Поставьте первую контрольную точку

Работает локально · Ничего не загружается на сервер

Как работает Генератор CSS cubic-bezier, конфиденциальность и похожие инструменты

Путь задачи / от ввода к результату

Как построить кривую плавности cubic-bezier

  1. 01

    Поставьте первую контрольную точку

    Установите «Контрольная точка X1» от 0 до 1 и «Контрольная точка Y1» от −1 до 2. График кривой перерисовывается вживую, с направляющей от начальной точки к вашему маркеру.

  2. 02

    Поставьте вторую контрольную точку

    Установите «Контрольная точка X2» (0–1) и «Контрольная точка Y2» (−1 до 2). Именно выведение значения Y за пределы 1 создаёт перелёт, придающий плавности пружинистость; опускание Y1 ниже 0 добавляет миг предвосхищения перед началом движения.

  3. 03

    Задайте длительность

    Выберите «Длительность» от 0,1 до 4 секунд. Маркер на дорожке движения циклически проходит её с вашей точной кривой, так что ритм, который вы видите, — это ритм, который вы отправите в продакшен.

  4. 04

    Или начните с известной кривой

    Кривая по умолчанию — 0,25; 0,1; 0,25; 1 — в точности совпадает со стандартным ключевым словом ease и является нейтральной отправной точкой. Нажмите «Пример», чтобы получить пружинистую кривую с перелётом (0,34; 1,56; 0,64; 1), демонстрирующую, что делает значение Y выше 1.

  5. 05

    Скопируйте CSS тайминга

    «Копировать CSS» или «Скачать .css» сохраняет toolars-cubic-bezier.css. Правило .motion задаёт transition-duration и оба свойства timing-function. Оно не задаёт animation-duration; для анимации ключевых кадров укажите длительность отдельно.

  6. 06

    Прочитайте график перед отправкой

    График рисует прогресс во времени между фиксированными начальной и конечной точками: пологие участки — медленные, крутые — быстрые. Кривая, опускающаяся ниже старта или поднимающаяся выше финиша, — не ошибка: это предвосхищение и перелёт, нарисованные честно.

Факты об инструменте

Обработка
В вашем браузере
Ввод покидает устройство
Никогда
Хранение
Ничего не сохраняется
Цена
Бесплатно

Ваши данные остаются в браузере.

Генератор CSS cubic-bezier использует проверенный путь локального выполнения и не создаёт скрытую историю ввода и вывода.

Локальное выполнение

Работает внутри текущей вкладки браузера.

Никакой скрытой обработки

Активные данные инструмента никогда не становятся записями документов Toolars.

Аккаунт не требуется

Используйте основной сценарий без создания профиля. Избранное синхронизируется с аккаунтом после входа.

Мгновенный сброс

Закройте вкладку — и рабочие данные исчезнут.

Что на самом деле делает Генератор CSS cubic-bezier

Модалка должна открываться резко, но садиться мягко; ховер карточки нуждается в небольшом перелёте; тултип онбординга обязан быть неторопливым — плавность отличает интерфейс, который ощущается законченным, от интерфейса по умолчанию. Рисовать кривую здесь, глядя на настоящий анимированный предпросмотр, лучше, чем угадывать четыре числа в таблице стилей, а эксперименты остаются во вкладке. Когда цикл ощущается правильным, четыре значения уже корректны для продакшена.

Частые вопросы

Почему X ограничен диапазоном от 0 до 1, а Y — от −1 до 2?
Стандарт CSS держит оба значения X внутри [0, 1], чтобы время по кривой всегда двигалось вперёд. У Y такого ограничения нет — значения ниже 0 или выше 1 дают предвосхищение и перелёт, — а этот инструмент ограничивает Y диапазоном от −1 до 2, покрывающим любую практичную плавность.
Что именно экспортируется?
Класс .motion с тремя объявлениями: transition-duration с вашими секундами и одно и то же значение cubic-bezier(), присвоенное transition-timing-function и animation-timing-function.
Как читать предпросмотр?
График рисует кривую между фиксированными начальной и конечной точками с направляющими к обоим контрольным маркерам, а дорожка ниже анимирует маркер с выбранной длительностью и настоящей функцией тайминга — честный ритм, а не приближение.
Как сформировать ease-in, ease-out или пружину?
Сдвиньте X первого маркера к 1 при низком Y для медленного старта ease-in; приведите X второго маркера к 0 при высоком Y для мягкого ease-out. Поднимите любой Y выше 1 для пружины, перелетающей цель, или опустите ниже 0 для предвосхищения.
Работает ли класс и для переходов, и для покадровых анимаций?
Да — одно и то же значение cubic-bezier() присваивается обоим свойствам timing-function, а длительность находится в transition-duration. Если нужен только один механизм, удалите другую строку после вставки; сама кривая механизм-агностична. С keyframes помните: функция тайминга применяется между каждой парой кадров, а не ко всему прогону.
Что-либо загружается или сохраняется?
Нет. Кривая вычисляется и предпросматривается локально в этой вкладке, аккаунт не требуется, и ничего не записывается и не отправляется. Нажмите «Сбросить», чтобы вернуть плавность по умолчанию.

Продолжить: Дизайн

Связанные задачи, а не тупик.

Перейдите в другую сфокусированную рабочую область, не возвращаясь к полному каталогу.

Генератор CSS-лоадеров

CSS Loader Generator

Проектируйте спиннер-кольцо или три точки с настройкой размера, толщины, скорости и цветов и копируйте CSS с поддержкой reduced motion.

Создание

Генератор CSS-чекбоксов

CSS Checkbox Generator

Стилизуйте кастомный чекбокс — размер, рамка, цвета состояний — и копируйте CSS, под которым остаётся настоящий доступный с клавиатуры input.

Создание

Генератор CSS-переключателей

CSS Switch Generator

Собирайте переключатель на чистом CSS: дорожка, бегунок и цвета двух состояний; в коде — обработка фокуса и reduced motion.

Создание

Генератор CSS clip-path

CSS Clip Path Generator

Редактируйте вершины мышью, клавиатурой или координатами. Четыре шаблона, локальное копирование объявления clip-path или полного CSS.

Создание