CSS 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вказують на проміжні кроки анімації.
Загальний опис
автор: NagarD
- Порада
-
Експериментуйте зі значеннями коефіцієнтів, щоб досягти бажаного ефекту. Навіть невеликі зміни можуть значно змінити вигляд анімації.
автор: Bond - Нотатка
-
Важливо відзначити, що правильний вибір значень для функції
cubic-bezier()може бути важливим для досягнення бажаного ефекту анімації. Значення можуть бути від0до1. Різні значення кривої Безьє впливають на швидкість та характер зміни значень властивостей.Для визначення кривих Безьє з більш складною поведінкою можна скористатися онлайн-інструментами для створення анімаційних функцій або графічними редакторами, які підтримують цю функціональність. Наприклад, ви можете використовувати онлайн-інструменти, такі як
автор: Bondcubic-bezier.com, для візуалізації кривих і швидкості анімації перед використанням їх у вашому коді.
Синтаксис
cubic-bezier(<x1>, <y1>, <x2>, <y2>);Функція cubic-bezier може отримувати єдине значення:
-
<x1>, <y1>, <x2>, <y2> -
Чотири числові значення, кожне з яких повинно бути в межах від
автор: Bond0до1. Вони визначають коефіцієнти п'ятичлена Безьєра, який описує кастомну криву для анімації.
| Значення без задання: | (0.0, 0.0, 1.0, 1.0) |
|---|
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 16 | 4 | 6 | 12.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 6 |
Приклади
+ запропонувати свій приклад у пісочниці
Анімація, яка надає ефект відскоку для елемента.
HTML
<div id="description">
<h2>Ефект "відскоку"</h2>
<p>Анімація, яка надає ефект відскоку для елемента.</p>
</div>
<div id="result">
<div class="bounce"></div>
</div>CSS
/* Загальні стилі */
body {
background-color: #f1f1f1;
}
#description {
text-align: center;
margin-bottom: 20px;
}
h2 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #333;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
color: #777;
}
#result {
padding-top: 100px;
display: flex;
justify-content: center;
}
/* Анімація "відскоку" */
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-100px);
}
70% {
transform: translateY(-60px);
}
85% {
transform: translateY(-80px);
}
100% {
transform: translateY(0);
}
}
.bounce {
width: 100px;
height: 100px;
background-color: #ff6384;
animation: bounce 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
border-radius: 50%;
}Елемент, який постійно змінює свій розмір з ефектом пульсації.
HTML
<div id="description">
<h2>Ефект пульсації</h2>
<p>Елемент, який постійно змінює свій розмір з ефектом пульсації.</p>
</div>
<div id="result">
<div class="pulse"></div>
</div>CSS
/* Загальні стилі */
body {
background-color: #f1f1f1;
}
#description {
text-align: center;
margin-bottom: 20px;
}
h2 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #333;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
color: #777;
}
#result {
padding-top: 50px;
display: flex;
justify-content: center;
}
/* Анімація пульсації */
@keyframes pulse {
0% {
transform: scale(1);
background-color: #ff6384;
}
50% {
transform: scale(1.5);
background-color: #42a5f5;
}
100% {
transform: scale(1);
background-color: #ff6384;
}
}
.pulse {
width: 100px;
height: 100px;
animation: pulse 2s cubic-bezier(0.17, 0.67, 0.83, 0.67) infinite;
border-radius: 50%;
}Три смуги проходять однакову відстань за однаковий час, різниця тільки в часовій функції. Нижня має y2 = 1.55, тобто виходить за кінцеве значення й повертається — це той самий перельот, який неможливо задати іменованими значеннями.
HTML
<div id="description">
<h2>Одна відстань, три часові функції</h2>
<p>linear — рівномірно, ease — з розгоном і гальмуванням, custom — з перельотом за кінцеву точку.</p>
</div>
<div id="result">
<div class="track">
<span class="name">linear</span>
<div class="ball lin"></div>
</div>
<div class="track">
<span class="name">ease</span>
<div class="ball eas"></div>
</div>
<div class="track">
<span class="name">cubic-bezier(0.68, -0.55, 0.27, 1.55)</span>
<div class="ball cus"></div>
</div>
</div>CSS
#description {
font-style: italic;
line-height: 1.5;
margin-bottom: 30px;
padding: 12px 16px;
background-color: #f7f7f7;
border: 1px solid #ccc;
}
#result {
display: grid;
gap: 18px;
max-width: 420px;
margin: 0 auto;
}
.track {
position: relative;
height: 56px;
padding-top: 22px;
border-bottom: 1px solid #ddd;
}
.name {
position: absolute;
top: 0;
left: 0;
font: 12px/1.4 monospace;
color: #555;
}
.ball {
width: 34px;
height: 34px;
border-radius: 50%;
background: #2f6fed;
animation-name: run;
animation-duration: 2.4s;
animation-iteration-count: infinite;
}
.lin { animation-timing-function: linear; }
.eas { animation-timing-function: ease; }
.cus {
background: #e11d48;
animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes run {
0%, 8% {
transform: translateX(0);
}
58%, 100% {
transform: translateX(240px);
}
}Коментарі
Коментарів ще немає — будьте першим!