Задачи для решения
Движение
Повторите страницу по данному по образцу (движение повторится 3 раза):
Вы можете открыть этот пример в отдельной вкладке браузера.
Бесконечное движение
Повторите страницу по данному по образцу (движение будет бесконечным):
Вы можете открыть этот пример в отдельной вкладке браузера.
Смена фона
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Движение по квадрату
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Движение по квадрату и смена фона
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Движение туда-сюда
Повторите страницу по данному по образцу (здесь движение реализовано через 3 ключевые точки: 0%, 50%, 100%):
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу (здесь движение реализовано через animation-direction: alternate):
Вы можете открыть этот пример в отдельной вкладке браузера.
Индикатор
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Пауза
Повторите страницу по данному по образцу (наведите мышь на элемент - элемент начнет двигаться, уберите - перестанет):
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу (наведите мышь на красный блок - элемент под ним элемент начнет двигаться, уберите - перестанет):
Вы можете открыть этот пример в отдельной вкладке браузера.
Падающий мячик
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.