Редактор пом’якшення cubic-bezier
Проєктуйте власні криві пом’якшення cubic-bezier у редакторі з перетягуванням і живим переглядом анімації.
Перетягуйте два маркери, щоб сформувати криву пом’якшення.
transition-timing-function: -;
animation-timing-function: -;
Усе працює у вашому браузері: нічого не завантажується.
Про Редактор пом’якшення cubic-bezier
Редактор кривих прискорення Cubic-Bézier створює власні функції часу для переходів і анімацій CSS. Перетягніть два керуючі маркери на полотні кривої, і значення cubic-bezier(x1, y1, x2, y2) оновиться в реальному часі; попередній перегляд анімації відтворює прискорення поруч із лінійним еталоном, щоб ви відчули різницю, з можливістю налаштувати тривалість і миттєвого повторного відтворення.
Десять готових шаблонів охоплюють поширений набір: стандартні ease, ease-in, ease-out і ease-in-out, а також виразні криві на кшталт back і anticipate, що перевищують кінцеві точки, і плавні наростання й спади в стилі Material Design. Використовуйте їх як є або як відправну точку для власних коригувань.
Ви також можете ввести точні координати керуючих точок, натиснути «randomize» для натхнення й скопіювати або чисте значення cubic-bezier(), або готове до вставки правило CSS. Увесь редактор працює у вашому браузері.
Як використовувати Редактор пом’якшення cubic-bezier
- Перетягніть два маркери в редакторі кривої, щоб сформувати прискорення.
- Натисніть Replay і порівняйте анімацію з прискоренням та лінійний еталон, за потреби налаштувавши тривалість.
- Спробуйте готові шаблони (ease, back, anticipate, material та інші) для швидкої відправної точки.
- Тонко налаштуйте за допомогою числових полів керуючих точок для точних значень.
- Скопіюйте значення cubic-bezier() або повний фрагмент CSS.