Играйте в телеграм-игру «Код сурка»

Шесть дней, шесть ночей, тысячи участников и шикарные призы

Часть 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Задание