Перемикання станів з допомогою CSS keyframes

31

Від автора: скажімо, ви хочете, щоб якийсь елемент знаходився в одному стані 9 секунд і в іншому стані 1 секунду в циклі. Не потрібно ніяких плавних переходів, просто чітке перемикання станів.

Днями мені стало цікаво, як це реалізувати, і Сара Драснер показала мені, як можна перемикатися між дуже короткими станами. Наприклад, 59,999% і 60%. Тривалість анімації займає 10 секунд, і ми не можемо вставити проміжні кадри.

Трохи поясню: якщо ви використовуєте кроки, то ви не зможете використовувати щось типу .999:

div {

animation: color 10s steps(10) infinite both;
}

Один keyframe / одна зміна

Це наштовхнуло мене на ще одну дивність в CSS. Якщо ви використовували steps(1), то не буде ніяких змін, так адже? Тому що задіяний лише один крок. Це не так. Коли ви використовуєте steps(1), створюється два кроки з незрозумілої причини. Це можна використовувати.

Повернемося до першого прикладу з статті: одне стан триває 9 секунд, друге – 1 секунду. Ось так: 1-1-1-1-1-1-1-1-1-2

Тоді можна написати:

div {

background: orangered;
animation: color 10s steps(1) infinite both;
}
@keyframes color {
90% {
background: teal;
}
}

Блок div буде мати колір teal всього одну секунду! Після чого колір буде повертатися на orangered. Змінимо keyframe на 70% і отримаємо: 1-1-1-1-1-1-1-2-2-2

Змінимо на 10%: 1-2-2-2-2-2-2-2-2-2

Змінюємо стан і зберігаємо його

Ми тільки що отримали крутий трюк для зміни станів у циклі. Якщо вам не потрібен цикл, анімацію можна запускати один раз і залишатися в кінцевому стані:

div {

background: orangered;
animation: color 10s steps(1) forwards;
}
@keyframes color {
90% {
background: teal;
}
}

Ми всього-то видалили ключове слово infinite, яке зацикливало анімацію, і використовували слово forwards, яке зберігає стилі останнього стану. (Ключове слово both робить те ж саме)

Але як можна перемикатися між станами за допомогою взаємодії з користувачем? І це теж можливо! Уявіть дуже довгу анімацію (яка триває багато-багато днів). До такої анімації можна прив’язати користувальницький інтерфейс для перестрибування між станами. Нижче я навів просте демо, де по кліку на посилання спрацьовує стан :target, яке змушує анімацію перестрибнути на keyframe зі стилями стану: