Генератор CSS 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.
• Працює повністю у вашому браузері — нічого з того, що ви налаштовуєте, нікуди не завантажується. Безкоштовно, без реєстрації.

Як користуватися

1. Перетягніть повзунки x1/y1, щоб задати першу контрольну точку, яка формує початок анімації.
2. Перетягніть повзунки x2/y2, щоб задати другу контрольну точку, яка формує завершення анімації.
3. Спостерігайте за чорною кривою на графіку — крива, що вигинається над діагоналлю на початку, означає, що рух починається швидко, а та, що лишається під нею, означає, що рух починається повільно.
4. Натисніть Play, щоб побачити, як елемент попереднього перегляду рухається по треку, використовуючи вашу криву як transition-timing-function.
5. Спробуйте готовий набір (ease, ease-in, ease-out, ease-in-out, linear) як відправну точку, а потім злегка підкоригуйте повзунки.
6. Скопіюйте згенерований 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 · Генератор border-radius

Часті запитання