CSS function steps
Опис
Функція steps() в CSS використовується для визначення анімації зі ступінчастими переходами між значеннями властивостей. Вона дозволяє вказати кількість кроків (ступенів) та спосіб вирівнювання значень в межах кожного кроку.
Функція steps() має два параметри: n та position. Параметр n визначає кількість кроків (цілий додатній числовий значення), а параметр position вказує спосіб вирівнювання значень в межах кожного кроку. Для position можуть бути використані значення start (значення властивості змінюється в кожному кроці на початку кроку) або end (значення змінюється в кожному кроці в кінці кроку).
Ось короткий приклад використання функції steps():
.element {
animation: my-animation 2s steps(4, end) infinite;
}
@keyframes my-animation {
0% { opacity: 0; }
100% { opacity: 1; }
}
У цьому прикладі елементу, який стилізується за допомогою класу .element, встановлюється анімація з використанням steps(4, end). Це означає, що анімація буде виконуватися протягом 2 секунд з чотирма ступенями зміни значення властивості opacity. Значення opacity буде змінюватися в кінці кожного кроку, тобто під час зміни від 0 до 1 значення opacity буде змінюватися на кожному кроці.
- Нотатка
-
Використовуйте функцію
автор: Bondsteps()для створення анімаційних ефектів, які симулюють послідовність кроків або анімацію з проміжними станами. - Нотатка
-
Контролюйте кількість кроків і тип анімації (параметр
автор: Bond<jump-term>), щоб досягти потрібного візуального ефекту. - Нотатка
-
Варто зауважити, що функція
автор: Bondsteps()підтримується сучасними браузерами, але для забезпечення максимальної сумісності з різними браузерами рекомендується використовувати префікси вендорів та резервні значення анімації. - Нотатка
-
Функція
автор: Bondsteps()корисна для створення анімацій з дискретними переходами між значеннями, що надає ефект ступінчатого зміщення. Наприклад, використовується для створення анімації кадрів в анімаційних фільмах або для створення ефекту руху об'єктів по шаховій дошці.
Синтаксис
steps(<n>, <jump-term>);Функція steps може отримувати 2 значень:
-
<n> -
Ціле число, яке визначає кількість кроків анімації. Значення повинно бути більше або дорівнювати
автор: Bond1. -
<jump-term> -
Рядок, який може приймати значення
автор: Bondstartабоend. Значенняstartвказує, що перехід з одного стану до іншого відбувається в початковій частині кожного кроку, тоді як значенняendвказує, що перехід відбувається в кінцевій частині кожного кроку.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 8 | 4 | 5.1 | 12.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4 | 18 | 4 | 5 |
Приклади
+ запропонувати свій приклад у пісочниці
Приклад анімації, що використовує функцію steps() для зміни кольору об'єкта.
Елементи, які рухаються зліва направо з плавним переходом.
Коментарі
Коментарів ще немає — будьте першим!