Задачи для решения

Движение

Повторите страницу по данному по образцу (движение повторится 3 раза):

Вы можете открыть этот пример в отдельной вкладке браузера.

Бесконечное движение

Повторите страницу по данному по образцу (движение будет бесконечным):

Вы можете открыть этот пример в отдельной вкладке браузера.

Смена фона

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Движение по квадрату

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Движение по квадрату и смена фона

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Движение туда-сюда

Повторите страницу по данному по образцу (здесь движение реализовано через 3 ключевые точки: 0%, 50%, 100%):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (здесь движение реализовано через animation-direction: alternate):

Вы можете открыть этот пример в отдельной вкладке браузера.

Индикатор

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Пауза

Повторите страницу по данному по образцу (наведите мышь на элемент - элемент начнет двигаться, уберите - перестанет):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (наведите мышь на красный блок - элемент под ним элемент начнет двигаться, уберите - перестанет):

Вы можете открыть этот пример в отдельной вкладке браузера.

Падающий мячик

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.