Генератор CSS easing
Бесплатный онлайн-генератор easing для CSS. Перетаскивайте контрольные точки cubic-bezier на интерактивной кривой, выбирайте из 18 пресетов, смотрите зацикленную анимацию шарика и мгновенно копируйте функцию тайминга.
Что такое функция ускорения (easing) в CSS?
Функция ускорения управляет темпом продвижения анимации или перехода во времени. Элемент не обязан двигаться с постоянной скоростью: он может медленно тронуться, разогнаться, проскочить цель и успокоиться. В CSS она задаётся свойствами transition-timing-function или animation-timing-function.
Что означают четыре числа в cubic-bezier()?
cubic-bezier(x1, y1, x2, y2) определяет кривую двумя контрольными точками. Первая формирует начало движения, вторая — завершение. X — это время на шкале от 0 до 1, Y — прогресс: 0 — начальное значение, 1 — конечное.
Почему Y может выходить за пределы 0–1, а X нет?
X отображается на реальное время, поэтому значение меньше 0 или больше 1 нарушило бы причинность и запрещено спецификацией. Y свободен: выше 1 — перелёт цели, ниже 0 — сначала откат назад. Именно так пресеты Back создают ощущение отскока.
В чём разница между ease, ease-in и ease-out?
ease — значение браузера по умолчанию с мягким стартом и мягкой посадкой; ease-in стартует медленно и резко заканчивается; ease-out стартует быстро и замедляется; ease-in-out сочетает оба. Генератор также включает пресеты sine, quad, cubic, quart, expo, back и material — всего 18.
Как работает предпросмотр с шариками?
Два шарика движутся циклически заданную вами длительность. Верхний всегда движется по линейной функции как ориентир, нижний — по вашей кривой. Меняющийся зазор между ними наглядно показывает, что меняет ваш easing.
Куда вставлять сгенерированное значение?
Используйте его как значение transition-timing-function или animation-timing-function, например transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);. Инструмент выдаёт «голую» функцию cubic-bezier(...), готовую для любого правила.
Влияет ли функция ускорения на производительность анимации?
Сама функция тайминга бесплатна — она лишь пересчитывает прогресс по времени. Производительность зависит от того, какие свойства вы анимируете: transform и opacity дружелюбны к GPU, а анимация свойств раскладки вроде width или top вызывает дорогие reflow независимо от easing.
Можно ли сделать настоящий bounce или elastic?
Один cubic-bezier может один раз проскочить цель, но не умеет создавать многократные отскоки настоящего bounce или elastic. Для этого цепляйте несколько ключевых кадров в @keyframes или используйте Web Animations API; а вот одиночный плавный перелёт — именно то, что cubic-bezier делает отлично и что предлагает этот инструмент.
Отправляется ли куда-то то, что я здесь делаю?
Нет. Кривая рисуется на локальном canvas, а анимация предпросмотра целиком идёт в вашем браузере. Ничего не передаётся на сервер, поэтому после загрузки страницы генератор работает и офлайн.
Как использовать Генератор CSS easing
Лепите кривые easing для CSS визуально, вместо того чтобы угадывать числа. Тяните контрольные точки, сравнивайте движение с линейным эталоном и копируйте готовую cubic-bezier одним щелчком. Всё работает локально в вашем браузере.
- Выберите один из 18 пресетов как отправную точку, например Ease Out, Expo Out или Back Out.
- Тяните две рукояти на кривой: ось X — это время, она должна оставаться между 0 и 1, ось Y — прогресс и может выходить за пределы.
- При необходимости точности подстройте точные координаты P1 и P2 числовыми полями.
- Выставьте ползунок длительности и наблюдайте за двумя мечущимися шариками — полый всегда линейный, сплошной использует вашу кривую.
- Скопируйте сгенерированное значение cubic-bezier в transition-timing-function или animation-timing-function.
Вытяните рукоять Y выше 1 для уверенного перелёта, как cubic-bezier(0.34, 1.56, 0.64, 1) — кнопки и карточки становятся пружинистыми без единого keyframe.
Похожие инструменты
- Генератор CSS-градиентов Создавайте потрясающие CSS-градиенты визуально. Генерируйте линейные, радиальные и конические градиенты с несколькими цветовыми точками, углами и позициями. Мгновенно копируйте готовый CSS-код.
- Генератор CSS-лоадеров Бесплатный генератор CSS-лоадеров: десять спиннеров загрузки на чистом CSS с живой настройкой размера, скорости, толщины и цвета и копированием готовых HTML и CSS.
- Генератор Border Radius Бесплатный онлайн генератор border-radius. Перетащите 8 маркеров или выберите пресет капли, чтобы создать органичные CSS-формы и мгновенно скопировать код.
- Конвертер цветов Бесплатный онлайн-конвертер цветов. Мгновенное преобразование HEX, RGB, HSL, HSV с визуальным пикером. 100% конфиденциально, работает в браузере.
- Генератор text-shadow CSS Бесплатный онлайн-генератор text-shadow CSS. Складывайте несколько слоёв тени со смещением, размытием, цветом и прозрачностью, пробуйте пресеты «Неон», «3D», «Ретро» и мгновенно копируйте CSS.
- Генератор CSS clip-path Бесплатный онлайн-генератор CSS clip-path. Создавайте формы polygon, circle, ellipse и inset с перетаскиваемыми точками, живым предпросмотром и копированием CSS в один клик.
- Форматировщик CSS Мгновенно форматируйте и beautify CSS-код. Преобразуйте минифицированный CSS в читаемый код с настраиваемыми параметрами.
- Минификатор CSS Бесплатный онлайн-минификатор CSS. Мгновенно сжимайте и оптимизируйте CSS-код, удаляя пробелы, комментарии и лишние символы. Уменьшайте размер файла для ускорения загрузки сайта.