Справжні числа за лаштунками CSS-значення ease-in-out
Створіть власну функцію плавності CSS cubic-bezier(), перетягуючи дві контрольні точки, переглядайте результат поруч із лінійним рухом, а тоді копіюйте готове значення.
Обробляється повністю у вашому браузері — те, що ви тут вводите, ніколи не вивантажується.
Результат
Про цей інструмент
На цій сторінці генератор cubic-bezier відкривається з уже завантаженими значеннями x1=0.42, y1=0, x2=0.58, y2=1 — це точні координати контрольних точок, на які розкривається ключове слово ease-in-out у CSS. Перетягніть будь-який маркер або відредагуйте числа напряму — крива, попередній перегляд анімації та рядок для копіювання оновляться миттєво.
ease-in-out — одне з п'яти вбудованих ключових слів для часу в CSS, і воно популярне саме тому, що ця крива м'яко прискорюється на старті, тримає досить рівний темп у середині й знову сповільнюється перед завершенням — форма, яка виглядає природно для більшості рухів в інтерфейсах. Коли бачиш її як явні контрольні точки замість імені ключового слова, стає очевидно чому: y1 близький до 0, а y2 близький до 1, обидва поруч зі своїм відповідним x, тож немає виходу за межі в жодному напрямку.
Використовуйте ці чотири числа як відправну точку замість самого ключового слова щоразу, коли потрібно трохи скоригувати відчуття — зменшіть x1 для більш різкого старту або виведіть y2 вище 1, щоб перетворити цю саму форму на легкий вихід за межі. Кожна зміна миттєво оновлює попередній перегляд і готовий рядок cubic-bezier() для копіювання.