CSS steps() — покрокова анімація без плавності
Опис
автор: Bond
Загальний опис
автор: NagarD
- Нотатка
-
Використовуйте функцію
автор: 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 |
Приклади
+ запропонувати свій приклад у пісочниці
Елементи, які рухаються зліва направо з плавним переходом.
HTML
<div id="description">
<h2>Анімація руху об'єктів</h2>
<p>Елементи, які рухаються зліва направо з плавним переходом.</p>
</div>
<div id="result">
<div class="object-container">
<div class="object"></div>
<div class="object"></div>
<div class="object"></div>
</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;
}
/* Анімація руху об'єктів */
.object-container {
display: flex;
justify-content: flex-start;
animation: slideIn 2s infinite steps(3, end);
}
@keyframes slideIn {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
.object {
width: 50px;
height: 50px;
background-color: #42a5f5;
margin-right: 20px;
}Приклад анімації, що використовує функцію steps() для зміни кольору об'єкта.
HTML
<div id="description">
<h2>Анімація з використанням функції steps()</h2>
<p>Приклад анімації, що використовує функцію steps() для зміни кольору об'єкта.</p>
</div>
<div id="result">
<div class="animated-object"></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;
}
/* Анімація з використанням функції steps() */
.animated-object {
width: 150px;
height: 150px;
background-color: #42a5f5;
position: relative;
animation: changeColor 2s infinite steps(6, end);
}
@keyframes changeColor {
0% {
background-color: #42a5f5;
}
100% {
background-color: #ff6384;
}
}Угорі — посимвольний друк: ширина рядка їде від нуля до 28 знаків через steps(28), тому символи з'являються по одному. Нижче три доріжки з тією самою анімацією й різним пом'якшенням: linear дає плавний рух, steps(5) — п'ять стрибків, які не доходять до кінця доріжки, steps(5, jump-none) — стрибки, що впираються рівно в кінець.
HTML
<div id="description">
<h2>steps(): стрибки замість плавності</h2>
<p>Порівняйте другу й третю доріжку: з jump-none кружок доходить до правого краю, з типовим jump-end — ні.</p>
</div>
<div id="result">
<p class="type">Текст друкується посимвольно</p>
<p class="label">linear</p>
<div class="track"><div class="dot smooth"></div></div>
<p class="label">steps(5) — типовий jump-end</p>
<div class="track"><div class="dot five"></div></div>
<p class="label">steps(5, jump-none)</p>
<div class="track"><div class="dot five-none"></div></div>
</div>CSS
/* У рядку 28 знаків, тому й кроків 28: один крок — один символ */
.type {
width: 28ch;
margin: 0 0 18px;
overflow: hidden;
white-space: nowrap;
border-right: 2px solid #1864ab;
font: 18px/1.6 ui-monospace, "Courier New", monospace;
animation: typing 3.5s steps(28) infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 28ch; }
}
.label {
margin: 14px 0 4px;
font: 13px/1.4 system-ui, sans-serif;
color: #495057;
}
.track {
position: relative;
width: 260px;
height: 26px;
border-radius: 13px;
background: #f1f3f5;
border: 1px solid #dee2e6;
}
.dot {
position: absolute;
top: 3px;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #1864ab;
animation: run 2.5s infinite;
}
@keyframes run {
from { transform: translateX(0); }
to { transform: translateX(228px); }
}
/* Ці правила стоять нижче .dot, тому перекривають easing зі скорочення animation */
.smooth { animation-timing-function: linear; }
.five { animation-timing-function: steps(5); }
.five-none { animation-timing-function: steps(5, jump-none); background: #2f9e44; }Коментарі
Коментарів ще немає — будьте першим!