Стань фронтенд-разработчиком с нуля —
со стажировкой в IT и личным наставником с первого дня

Часть 2: Анимация

31 задание

Рассмотрим основы анимации на 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Задание