CSS3-анимация
Свойство transition, рассмотренное в предыдущем уроке, — это лишь один из способов создания анимации в CSS3. С ним вы ограничиваетесь лишь двумя наборами стилей — до перехода и после.
В отличие от обычного transition, расширенная CSS-анимация позволяет создавать цепочку переходов: от одного набора стилевых правил ко второму, от второго к третьему, от третьего к четвертому и так далее. Кроме этого, увеличивается и количество вариантов запуска анимации: вы можете сделать проигрывание сразу после загрузки веб-страницы, а не только при наведении курсора. Также можно заставить анимацию повториться несколько раз либо вообще сделать бесконечный цикл.
Как создать CSS-анимацию
Порядок создания анимации можно разделить на два этапа:
- Создание необходимого количества ключевых кадров через правило
@keyframes.
Запись стилей для каждого кадра. - Подключение анимации к одному либо нескольким элементам.
Оба этапа будут детально рассмотрены далее в уроке. И начнем мы с изучения того, что такое ключевые кадры @keyframes в анимации и как их создавать.
