Анимация в интернете давно перестала быть простым украшением страницы и превратилась в полезный инструмент для улучшения юзабилити. Она помогает пользователю взаимодействовать с интерфейсом, привлекает внимание к важным моментам. Анимация — это последовательное отображение похожих кадров друг за другом. Каждый кадр немного изменяется, поэтому кажется, что картинка движется. Для анимирования интерфейса, создания интерактивных прототипов или рекламных роликов используют специальные программы, например, Adobe Animate или After Effects...

1. Создаем CSS-файл и HTML-файл 2. Создаем основу HTML и подключаем CSS-файл 3. Создаем контейнер <div></div>. 4. Изменяем контейнер в CSS 5. Создаем @keyframes XXX{ }. Вместо 'XXX' надо написать, как будет называться ваша анимация. 6. Вся анимация делится на части, чтобы указать в какой именно части анимации произойдет изменение в фигурных скобках пишут процент 0% и открывают фигурные скобки {}. И в этих фигурных скобках мы пишем что именно изменится в этой части анимации. После, нужно показать какой объект будет изменяться по этой анимации...