Реалните числа зад CSS лесно влизане
Проектирайте персонализирана CSS cubic-bezier() функция за синхронизиране чрез плъзгане на две контролни точки, прегледайте я на живо спрямо линейна препратка, след което копирайте готовата стойност.
Резултат
Тази страница отваря генератора на cubic-bezier с вече заредени x1=0,42, y1=0, x2=0,58, y2=1 — точните контролни точки, до които се разширява CSS ключовата дума за лесно влизане. Плъзнете манипулатора или редактирайте числата директно и кривата, предварителният преглед на анимацията и копируемият низ се актуализират незабавно.
ease-in-out е една от петте вградени ключови думи за синхронизиране на CSS и е популярна точно защото тази крива ускорява леко от началото, поддържа сравнително равномерно темпо през средата и намалява обратно преди края – форма, която се чете като естествена за повечето движения на потребителския интерфейс. Ако го разглеждаме като изрични контролни точки вместо име на ключова дума, става ясно защо: y1 е близо до 0, а y2 е близо до 1, и двете близо до съответстващото им x, така че няма превишаване в двете посоки.
Използвайте тези четири числа като отправна точка, а не самата ключова дума, когато трябва леко да побутнете усещането – дръпнете x1 надолу за по-бърз старт или натиснете y2 над 1, за да превърнете същата тази форма в леко надхвърляне. Всяка промяна актуализира незабавно визуализацията и реда cubic-bezier(), който може да се копира.