CSS cubic bezier генератор

Що таке крива Безьє в CSS

Функція cubic-bezier() в CSS допомагає легше створювати різні види анімації. Крім того, така анімація може бути більш плавною, і розробник має більше контролю над анімацією. За допомогою кубічної функції Безьє ми можемо встановити точні таймінги для анімації, використовуючи математичну криву Безьє. Ця функція використовує 4 числа, які представляють контрольні точки кривої Безьє. Ці точки визначають, як анімація змінюється з часом. Перші 2 значення представляють першу точку, а останнє - другу. Отже, для кращого розуміння, ми можемо написати кубічно-безьє-функцію CSS ось так:

Як використовувати cubic bezier в CSS

Як я вже казав, крива Безьє може допомогти нам зробити анімацію кращою. Отже, ви можете додати cubic bezier до будь-якої анімації, як до переходів, так і до властивостей анімації. Майже завжди, коли ви можете використовувати стандартні властивості лінійного переходу (linear, ease, ease-in, ease-out, ease-in-out), ви можете замінити їх кривою Безьє. Для цього вам слід просто скопіювати значення cubic-bezier() з поля введення і використати його як значення для animation-timing-function та transition-timing-function

Приклад функції cubic-bezier() в CSS

Ось як ви можете використовувати криву Безьє в своєму CSS-коді. Нижче наведено 2 приклади (для анімацій на основі переходу та звичайних анімацій):

/* Повна форма для анімацій на основі transition */
.transition-element {
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.25, 0.75, 0.75, 0.25);
}

/* Коротка форма  */
.transition-element-short {
    transition: all 1s cubic-bezier(0.25, 0.75, 0.75, 0.25);
}

/* Повна форма для анімацій на основі animation */
.animation-element {
    animation-name: example;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.25, 0.75, 0.75, 0.25);
}

/* Коротка форма */
.animation-element-short {
    animation: example 1s cubic-bezier(0.25, 0.75, 0.75, 0.25);
}