cubic-bezier() — это функция тайминга CSS, определяющая, как анимация ускоряется и замедляется. Её четыре значения — x1, y1, x2, y2 — это две контрольные точки кривой, сопоставляющей время с прогрессом. Ось X — время (0 до 1), ось Y — прогресс анимации.
Выберите пресет или перетащите оранжевые контрольные точки на холсте, чтобы сформировать кривую сглаживания. Анимированный шар точно показывает ощущение тайминга, а CSS-вывод готов к вставке в любую transition или animation.
Frequently Asked Questions
Q: Что такое cubic-bezier в CSS?
Что такое cubic-bezier в CSS? Это функция тайминга для transition и animation, задающая кривую скорости: как быстро анимация прогрессирует во времени. По умолчанию — cubic-bezier(0.25, 0.1, 0.25, 1), также называемая ease.
Q: Каковы стандартные значения сглаживания?
Каковы стандартные значения сглаживания? ease = (0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1), linear = (0, 0, 1, 1).
Q: Как создать эффект отскока?
Как создать эффект отскока? Выйдите значениями Y за пределы 1, например cubic-bezier(0.34, 1.56, 0.64, 1). Кривая ненадолго превышает цель и возвращается — пружинящий отскок.
Q: Почему анимация выглядит сломанной при отрицательном Y?
Почему анимация выглядит сломанной при отрицательном Y? Отрицательный Y создаёт антиципацию — элемент движется назад перед движением вперёд. Для back-easing это намеренно, но в большинстве переходов контента выглядит неверно.
Q: Можно ли использовать cubic-bezier в анимациях?
Можно ли использовать cubic-bezier в анимациях? Да, и в transition, и в @keyframes, через свойство timing-function. Применяется и к анимациям, привязанным к скроллу.
Русские традиционные цвета
От гжельской синевы до хохломского золота — русская палитра рождена народными промыслами, иконописью и северной природой. Эти цвета до сих пор вдохновляют дизайнеров по всему миру.
Алый #FF2400Алый цвет знамён, сарафанов и праздничной символики
Васильковый #6495EDЦвет полевых васильков — символ русских лугов
Золото Хохломы #D4AF37Золотой орнамент хохломской росписи
Гжель Синий #005A9CКобальтовая синева гжельской керамики
Изумрудный #50C878Цвет уральских самоцветов и малахита
Бордовый #800020Тёмно-красный цвет театральных занавесов
Янтарный #FFBF00Балтийский янтарь — золото Калининграда
Сиреневый #C8A2C8Нежная сирень майских садов
Охристый #CC7722Цвет иконописи и древних фресок
Снежно-белый #F8F8FFБелый снег русских зим
Q: Что такое гжель?
Что такое гжель? Гжель (#005A9C) — традиционная русская керамика с синей кобальтовой росписью на белом фоне, производимая в Подмосковье с XVIII века и ставшая символом русского народного искусства.
Q: Что такое хохлома?
Что такое хохлома? Хохлома — традиционная деревянная роспись с золотым орнаментом (#D4AF37) на чёрном или красном фоне, создаваемая в Нижегородской области с XVII века.