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

Если вы в последнее время заходили в интернет, то, скорее всего, видели красивую анимацию загрузки, которая заполняет страницу, прежде чем элегантно подгрузится ее содержимое. Некоторые социальные гиганты, такие как Facebook, даже используют этот подход для улучшения загрузки страниц...