Русский
Рисуйте кастомные CSS-кривые easing с живой анимированной превью.
Последнее обновление
.element {
transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}Функция *easing* в CSS управляет ускорением и замедлением анимации по ходу её длительности. Ключевые слова ease, ease-in, ease-out и ease-in-out - это сокращения для четырёх конкретных кривых. Всё остальное задаёт функция cubic-bezier() - четыре числа и собственная кривая.
Эти четыре числа - координаты двух контрольных точек (x1, y1, x2, y2). Писать их вручную неудобно: маленькие изменения дают большие визуальные эффекты, а небольшой перебор приводит к *пружинистому* движению, которое в числах не считывается. Визуальный редактор позволяет перетаскивать маркеры и сразу видеть отклик - это намного быстрее, чем подбирать десятые.
Редактор Coddy рисует кривую в реальном времени, анимирует тестовый шарик с вашим easing и предлагает пресеты под самые ходовые сценарии: CSS-ключевые слова, *Material standard*, упругий bouncy-out, anticipate с овершутом. Скопируйте строку cubic-bezier() и вставьте в CSS - всё работает в браузере.
linear, равный прогресс на единицу времени.Выберите пресет, близкий к нужному ощущению. *Material standard* и *Bouncy out* - хорошие точки старта для UI; *ease-out* - безопасный дефолт для появлений.
Цветные кружки - контрольные точки. Тяните первый, чтобы тонко настроить *старт* анимации, второй - её *финал*. Перетаскивание маркера выше верхнего края даёт overshoot.
Подберите реалистичную длительность для реальной анимации. UI-переходы обычно 150–300 мс, акцентные движения 400–600 мс. Нажмите *Replay*, чтобы перезапустить превью.
Для точных значений вводите X1/Y1/X2/Y2. Y может выходить за 0..1, X всегда остаётся в 0..1.
Нажмите *Скопировать*, чтобы получить полную правило transition. Перенесите в свою таблицу стилей и замените transform на нужное свойство.
Самые ходовые easings и их cubic-bezier-значения. Четыре ключевых слова - это псевдонимы конкретных кривых.
| Easing | Значения cubic-bezier | Когда использовать |
|---|---|---|
ease | (0.25, 0.1, 0.25, 1) | Дефолт transition - мягко, но универсально |
linear | (0, 0, 1, 1) | Равномерная скорость - обычно плохо в UI, хорошо для лоадеров |
ease-in | (0.42, 0, 1, 1) | Медленный старт, быстрый финал - лучше для скрытий |
ease-out | (0, 0, 0.58, 1) | Быстрый старт, медленный финал - лучше для появлений и реакций |
ease-in-out | (0.42, 0, 0.58, 1) | Симметричный - хорош для переключений вперёд-назад |
| Material standard | (0.4, 0, 0.2, 1) | Современное, энергичное UI-движение |
| Bouncy out | (0.18, 0.89, 0.32, 1.28) | Перелёт и оседание - игривые появления |
.btn { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover { transform: translateY(-2px);}Большая часть подъёма случается быстро в начале, потом плавно успокаивается - кажется отзывчивым курсору, а не вязким.
.card { transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}Y2 = 1.28 заставляет кривую перешагнуть цель и затем осесть. Используйте дозированно - пружинистое движение быстро надоедает.
.hero { transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}Отрицательный Y1 ненадолго уводит анимацию в *противоположную* сторону, прежде чем она пойдёт к цели. Приём из классической анимации - лёгкая антиципация делает основное движение более осмысленным.
ease-in для появлений. Он медленно стартует и быстро заканчивает - противоположность отзывчивости. Для появлений берите ease-out.linear для UI как «нейтральный». Равномерное движение выглядит механически; уместно для прогрессбаров и лоадеров, не для всего остального.cubic-bezier()?cubic-bezier(x1, y1, x2, y2). Первая точка формирует *начало*, вторая - *конец*. X всегда в диапазоне 0..1 (время); Y может выходить за 0..1 для эффектов overshoot/anticipate (прогресс).cubic-bezier(0.4, 0, 0.2, 1). Для скрытий уместен *ease-in*. Избегайте *linear*, если только не рисуете прогресс.ease и ease-out?ease мягко стартует. ease-out сразу разгоняется и тормозит - это *немедленное* движение и ощущается отзывчивее, чем ease.cubic-bezier(0.18, 0.89, 0.32, 1.28) перелетает цель примерно на 28 % и оседает. Для нескольких отскоков нужны @keyframes или библиотека spring-физики - cubic-bezier даёт только один overshoot.@keyframes?animation-timing-function, в шортхенде animation или на каждом keyframe отдельно. Для сложных многоэтапных движений можно задавать разный easing между каждой парой ключевых кадров.