Редактор на cubic-bezier (CSS easing)

Как да използвате редактора на cubic-bezier

1. Плъзнете двата манипулатора върху графиката. P1 (първата контролна точка) определя началото на движението, P2 края. Времето върви отляво надясно, а напредъкът отдолу нагоре.
2. Или въведете стойност в Стойност на cubic-bezier(): пълен cubic-bezier(0.4, 0, 0.2, 1), четири числа или ключова дума като ease-in-out. Полетата x1, y1, x2 и y2 редактират по една координата.
3. Започнете от менюто Готови криви (CSS ключови думи, семействата от sine до back и кривите на Material Design) или от бутоните с ключови думи. Когато кривата ви съвпада с готова, името ѝ се показва до бутоните.
4. Следете Преглед на анимацията: точката на Вашата крива и точката на linear изминават същото разстояние за същата Продължителност. Използвайте Пауза/Пусни и Започни отначало, за да ги сравните.
5. Копирайте резултата от CSS функция за времето или копирайте Приближение с linear() и изберете броя на Сегменти.

Клавиатура: фокусирайте манипулатор и използвайте стрелките, за да го преместите с 0,01, или с 0,1 при натиснат Shift.

Ако системата ви е настроена за намалено движение, анимацията започва на пауза. Натиснете Пусни, ако искате да я стартирате въпреки това.

Инструментът работи във вашия браузър. Нищо от въведеното не се изпраща към сървър.

Какво означава cubic-bezier()

CSS функцията за плавност (easing) съпоставя изминалото време на прехода (от 0 до 1) с неговия напредък (от 0 до 1). cubic-bezier(x1, y1, x2, y2) описва това съпоставяне с кубична крива на Безие, която започва от (0, 0), завършва в (1, 1) и се издърпва от две контролни точки, P1 = (x1, y1) и P2 = (x2, y2).

• Стойностите x са времето и трябва да остават между 0 и 1, иначе функцията не би била валидна крива на времето. Редакторът ги държи в обхвата.
• Стойностите y са напредъкът и могат да са под 0 или над 1. Стойност y над 1 кара анимацията да премине целта си и да се върне, като кривите Back; под 0 тя първо се движи назад.
• Стръмен наклон означава бързо движение, плосък наклон бавно. ease-out започва бързо и завършва бавно, което е естествено за елементи, влизащи на екрана. ease-in прави обратното и подхожда на излизащи елементи.

CSS ключовите думи са преки пътища: ease = cubic-bezier(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).

Приближението с linear()

По-новата функция linear() изброява стойности на напредъка в равномерно разположени моменти, например linear(0, 0.25, 0.5, 0.75, 1), и ги свързва с прави линии. Инструментът взема проби от кривата ви (решава Безие за всяка стъпка във времето) и записва тези стойности с три знака след десетичната точка. При 20 до 40 сегмента резултатът е визуално идентичен с кривата. Истинската полза от linear() е при криви, които Безие не може да начертае, като отскачане и пружини, но тя позволява и споделяне на един синтаксис. Работи в Chrome и Edge 113+, Firefox 112+ и Safari 17.2+, затова запазете стойността cubic-bezier() като резервен вариант.