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 буде змінюватися на кожному кроці.

Синтаксис

steps(<n>, <jump-term>);

<n>

Ціле число, яке визначає кількість кроків анімації. Значення повинно бути більше або дорівнювати 1.

<jump-term>

Рядок, який може приймати значення start або end. Значення start вказує, що перехід з одного стану до іншого відбувається в початковій частині кожного кроку, тоді як значення end вказує, що перехід відбувається в кінцевій частині кожного кроку.

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі

Приклади

• Приклад 1
• Приклад 2