От автора: скажем, вы хотите, чтобы какой-то элемент находился в одном состоянии 9 секунд и в другом состоянии 1 секунду в цикле. Не нужно никаких плавных переходов, просто четкое переключение состояний.
На днях мне стало интересно, как это реализовать, и Сара Драснер показала мне, как можно переключаться между очень короткими состояниями. Например, 59,999% и 60%. Длительность анимации занимает 10 секунд, и мы не можем вставить промежуточные кадры.
Немного поясню: если вы используете шаги, то вы не сможете использовать что-то типа .999:
|
1 2 3 4 |
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
Тогда можно написать:
|
1 2 3 4 5 6 7 8 9 10 11 |
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
Изменяем состояние и сохраняем его
Мы только что заполучили крутой трюк для смены состояний в цикле. Если вам не нужен цикл, анимацию можно запускать один раз и оставаться в конечном состоянии:
|
1 2 3 4 5 6 7 8 9 10 11 |
div { ... background: orangered; animation: color 10s steps(1) forwards; } @keyframes color { 90% { background: teal; } } |
Мы всего-то удалили ключевое слово infinite, которое зацикливало анимацию, и использовали слово forwards, которое сохраняет стили последнего состояния. (Ключевое слово both делает то же самое)
Но как можно переключаться между состояниями при помощи взаимодействия с пользователем? И это тоже возможно! Представьте очень долгую анимацию (которая длится много-много дней). К такой анимации можно привязать пользовательский интерфейс для перепрыгивания между состояниями. Ниже я привел простое демо, где по клику на ссылку срабатывает состояние :target, которое заставляет анимацию перепрыгнуть на keyframe со стилями состояния:
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
