CSS Cubic-Bezier генератор

Този инструмент ви позволява да оформите персонализирана CSS крива на плавност cubic-bezier() с четири плъзгача и да я прегледате на живо преди да копирате кода. Регулирайте стойностите на контролните точки x1, y1, x2 и y2, наблюдавайте как кривата и движещият се елемент за преглед се обновяват мигновено, след което копирайте transition-timing-function: cubic-bezier(...) директно в стиловия си файл.

Какво представлява този инструмент?

cubic-bezier() е CSS функция за времетраене, която контролира как анимирана или преходна стойност ускорява и забавя във времето, вместо да се движи с постоянна скорост. Тя се дефинира от две контролни точки — (x1, y1) и (x2, y2) — които огъват крива между фиксирана начална точка (0,0) и крайна точка (1,1). Стойностите на x трябва да остават между 0 и 1, но стойностите на y могат да излизат извън този диапазон, за да създадат ефекти на надвишаване или отскок.

Ръчно написани, настройването на четири десетични числа за постигане на усещане, което не е нито прекалено рязко, нито размекнато, изисква много проби и грешки. Този инструмент заменя това предположение с директна манипулация: плъзнете плъзгач, наблюдавайте как кривата се огъва, а топчето за преглед се движи съответно, и копирайте CSS кода щом движението изглежда правилно.

Източник: CSS Easing Functions Level 1, W3C — спецификацията, дефинираща cubic-bezier() и петте именувани ключови думи, на които се базират готовите настройки на този инструмент.

Защо да го използвате?

Живата SVG графика показва точно как се огъва кривата ви между фиксираните начална и крайна точка, като са начертани и двете контролни точки заедно с дръжките им за яснота.
Бутонът за възпроизвеждане анимира елемент за преглед по писта, използвайки точната ви крива, за да усетите движението, а не просто да видите статична графика.
Готови настройки с едно кликване за петте стандартни именувани функции за плавност — ease, ease-in, ease-out, ease-in-out и linear — както са документирани в спецификацията CSS Easing Functions.
Стойностите на y могат да падат под 0 или да се качват над 1, което ви позволява да създавате ефекти на надвишаване/отскок, каквито именуваните ключови думи не могат да произведат.
Извежда готов за поставяне CSS код transition-timing-function — същата стойност работи и с animation-timing-function.
Работи изцяло в браузъра ви — нищо от конфигурираното от вас не се качва никъде. Безплатно, без регистрация.

Как да го използвате

Плъзнете плъзгачите x1/y1, за да зададете първата контролна точка, която определя как започва анимацията.
Плъзнете плъзгачите x2/y2, за да зададете втората контролна точка, която определя как завършва анимацията.
Наблюдавайте черната крива на графиката — крива, която се извива над диагонала в началото, означава, че движението започва бързо, а такава, която остава под нея, означава, че движението започва бавно.
Кликнете „Пусни“, за да видите как елемент за преглед се движи по пистата, използвайки кривата ви като transition-timing-function.
Пробвайте готова настройка (ease, ease-in, ease-out, ease-in-out, linear) като начална точка, след което фино регулирайте плъзгачите оттам.
Копирайте генерирания CSS код и го поставете в правило за transition или animation.

Пример

Вход

x1: 0.25, y1: 0.1, x2: 0.25, y2: 1

Резултат

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Това е стандартната CSS ключова дума ease, изписана като изрични контролни точки — бърз старт, рязко ускорение, а после постепенно забавяне към края.

Защо стойностите на y могат да надхвърлят 0–1

За разлика от оста x, която представлява времето и трябва да върви от 0 до 1, оста y представлява напредъка на анимираната стойност и няма такова ограничение. Задаването на y1 под 0 или y2 над 1 кара кривата да се спусне под началната стойност или да прескочи крайната стойност, преди да се стабилизира — основата на ефектите на надвишаване и предчувствие, използвани при натискане на бутони, изскачане на модални прозорци и игриви микровзаимодействия в интерфейса. Нито една от петте именувани ключови думи (ease, ease-in, ease-out, ease-in-out, linear) не може да произведе това; за целта е нужна персонализирана cubic-bezier().

transition-timing-function срещу animation-timing-function

Стойността cubic-bezier(), генерирана от този инструмент, работи еднакво и в двете свойства. Използвайте transition-timing-function, когато движението се задейства от промяна на състоянието (като посочване с мишката или превключване на клас), и animation-timing-function в правило за анимация, задвижвано от @keyframes, когато ви е нужно същото усещане за плавност, приложено автоматично или в цикъл.

Често срещани модели на плавност

Бърза обратна връзка в интерфейса (бутони, превключватели): дръжте контролните точки близо до диагонала с лек наклон към ease-out, напр. cubic-bezier(0.4, 0, 0.2, 1).
Стандартната крива на Material Design: cubic-bezier(0.4, 0, 0.2, 1) — бърз старт, плавен финал, широко използвана за преходи на панели и карти.
Отскок/надвишаване: избутайте y2 над 1, напр. cubic-bezier(0.34, 1.56, 0.64, 1), за игриво усещане при появяване.
Предчувствие преди движение: избутайте y1 под 0, така че елементът леко да се дръпне назад, преди да се придвижи напред.
Плавно ease-in-out за циклични анимации: дръжте кривата близо до симетрична спрямо центъра.

Комбиниране с други CSS инструменти

Крива на плавност рядко стои сама — обикновено се прилага върху елемент, който също се нуждае от дефинирани сенки, заоблени ъгли или градиенти. Генерирайте визуалния стил с другите CSS инструменти по-долу, след което добавете функцията за времетраене от този инструмент към същото правило или декларация transition/animation.

→ Box Shadow Generator · Border Radius Generator

Често задавани въпроси

Какво всъщност означават четирите числа в cubic-bezier()?

Те са координатите на две контролни точки, (x1, y1) и (x2, y2), които огъват крива на Безие, вървяща от фиксирана начална точка при (0,0) до фиксирана крайна точка при (1,1). Оста x представлява изминалото време (от 0 до 1), а оста y представлява доколко е напреднало анимираното свойство, затова x1 и x2 трябва да остават в диапазона 0–1, докато y1 и y2 могат да излизат извън него.

Каква е разликата между ease, ease-in, ease-out и ease-in-out?

ease (стойността по подразбиране в CSS) започва бързо, а после леко се забавя. ease-in започва бавно и ускорява към края, полезно за елементи, напускащи екрана. ease-out започва бързо и забавя, полезно за елементи, влизащи в екрана. ease-in-out е бавно в двата края и по-бързо в средата, което дава плавно, симетрично усещане.

Мога ли да използвам една и съща стойност cubic-bezier() за преходи и за анимации?

Да. transition-timing-function и animation-timing-function приемат абсолютно същия синтаксис cubic-bezier() и произвеждат една и съща крива на плавност — единствената разлика е коя CSS функция (преход спрямо анимация с keyframes) е свързана с тази функция за времетраене.

Защо кривата ми изглежда счупена, когато y1 или y2 е много голямо или отрицателно?

Това е очаквано — избутването на стойностите на y далеч извън 0–1 създава силно надвишаване, при което анимираната стойност се люлее значително отвъд целта си, преди да се стабилизира. Това е валиден и често целенасочен ефект, но ако изглежда нежелан, върнете y1 и y2 по-близо до диапазона 0–1.

По-добра ли е персонализираната крива от простото използване на именуваните ключови думи?

Не непременно — петте ключови думи (ease, ease-in, ease-out, ease-in-out, linear) покриват повечето ежедневни нужди и се четат по-лесно в кода. Посегнете към персонализирана cubic-bezier(), когато ви е нужно специфично усещане, което ключовите думи не предлагат, например отскок, по-рязко „щракване“ или съответствие с конкретна спецификация на движението в дизайн система.