Анимация
Рассмотрим основы анимации на CSS. Нам предстоит пройти путь развития цивилизации и покорить космический простор. Мы будем двигать, поворачивать и видоизменять объекты, попутно осваивая приёмы работы анимации в CSS.
Привет, animation!
@keyframes: раскадровка
@keyframes: from и to
@keyframes: группировка кадров
Множественная анимация, шаг 1
Множественная анимация, шаг 2
Водное путешествие
Количество проигрываний анимации: animation-iteration-count
Направление анимации: animation-direction, шаг 1
Направление анимации: animation-direction, шаг 2
Задержка начала анимации: animation-delay, шаг 1
Задержка начала анимации: animation-delay, шаг 2
Задержка начала анимации: animation-delay, шаг 3
Воздушное путешествие
Состояние до и после анимации: animation-fill-mode, шаг 1
Состояние до и после анимации: animation-fill-mode, шаг 2
Состояние до и после анимации: animation-fill-mode, шаг 3
Состояние до и после анимации: animation-fill-mode, шаг 4
Состояние до и после анимации: animation-fill-mode, шаг 5
Запуск фабрики, шаг 1
Запуск фабрики, шаг 2
Остановка и запуск анимации: animation-play-state
«Форма» анимации, animation-timing-function
animation-timing-function, шаг 2
animation-timing-function, шаг 3
animation-timing-function, шаг 4
Ракета на старт, шаг 1
Ракета на старт, шаг 2
Посадка, шаг 1
Посадка, шаг 2
Посадка, шаг 3