Редактор cubic-bezier

Як користуватися редактором 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, а із Shift – на 0,1.

Якщо ваша система налаштована на зменшення руху, анімація починається в паузі. Натисніть Відтворити, якщо хочете все одно запустити її.

Інструмент працює у вашому браузері. Нічого з того, що ви вводите, не надсилається на сервер.

Що означає cubic-bezier()

Функція плавності CSS зіставляє час, що минув від початку переходу (від 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() як запасне.