css.in.ua
Підтримати

CSS function cubic-bezier()

Опис

Функція cubic-bezier() в CSS є ключовим інструментом для створення плавних анімацій. Вона дозволяє дизайнерам та розробникам створювати ефектні анімації, контролюючи зміну значень властивостей з часом за допомогою математичної кривої Безьє.

Ця функція використовує чотири числові значення, які вказують контрольні точки кривої Безьє. Ці значення визначають характер зміни властивості в різний момент часу під час анімації, дозволяючи вам досягти плавного переходу з одного стану в інший. Ось невеликий приклад коду, який демонструє використання cubic-bezier:

.element {
  transition-timing-function: `cubic-bezier(0.25, 0.1, 0.25, 1)`;
}

У цьому прикладі класу .element встановлюється властивість transition-timing-function зі значенням cubic-bezier(0.25, 0.1, 0.25, 1). Така крива Безьє створює плавний перехід, що може змінюватись згідно з заданими контрольними точками.

  • Крива Безьє визначає залежність між значеннями властивості в різний момент часу під час анімації.
  • Значення на початку кривої Безьє встановлюються на 0, а значення в кінці - на 1. Значення між 0 і 1 вказують на проміжні кроки анімації.
Порада:

Експериментуйте зі значеннями коефіцієнтів, щоб досягти бажаного ефекту. Навіть невеликі зміни можуть значно змінити вигляд анімації.
Нотатка:

Важливо відзначити, що правильний вибір значень для функції cubic-bezier() може бути важливим для досягнення бажаного ефекту анімації. Значення можуть бути від 0 до 1. Різні значення кривої Безьє впливають на швидкість та характер зміни значень властивостей.

Для визначення кривих Безьє з більш складною поведінкою можна скористатися онлайн-інструментами для створення анімаційних функцій або графічними редакторами, які підтримують цю функціональність. Наприклад, ви можете використовувати онлайн-інструменти, такі як cubic-bezier.com, для візуалізації кривих і швидкості анімації перед використанням їх у вашому коді.

Синтаксис

cubic-bezier(<x1>, <y1>, <x2>, <y2>);
<x1>, <y1>, <x2>, <y2>

Чотири числові значення, кожне з яких повинно бути в межах від 0 до 1. Вони визначають коефіцієнти п'ятичлена Безьєра, який описує кастомну криву для анімації.

Переглядачі

Переглядач

16

4

6

12.1

12
Переглядач

4.4

18

4

6

Мобільних переглядачів ще не додано.

Приклади


Анімація, яка надає ефект відскоку для елемента.

Елемент, який постійно змінює свій розмір з ефектом пульсації.

Документи

Зв'язок