1. Создаем CSS-файл и HTML-файл
2. Создаем основу HTML и подключаем CSS-файл
3. Создаем контейнер <div></div>.
4. Изменяем контейнер в CSS
5. Создаем @keyframes XXX{ }. Вместо 'XXX' надо написать, как будет называться ваша анимация.
6. Вся анимация делится на части, чтобы указать в какой именно части анимации произойдет изменение в фигурных скобках пишут процент 0% и открывают фигурные скобки {}. И в этих фигурных скобках мы пишем что именно изменится в этой части анимации. После, нужно показать какой объект будет изменяться по этой анимации. Это делается просто, нужно в div (CSS) добавить строчку. animation: XXX 1s forwards; . forwards - тег, который запрещает анимации повторяться многократно, то есть анимация проиграется только один раз, и контейнер останется в положении 100%. Пример:
В начале анимации контейнер был невидимым. После, под конец анимации, контейнер имел полный вид ( он был не прозрачным).
Так же можно сделать выдвижение контейнера с лева, справа, снизу или сверху. Пример:
Здесь, в самом начальном положении, контейнер был невидимым и имел самое левое положение. После проигрывания анимации он имел полный вид ( стал непрозрачным ) и переместился на 500px вправо. Вот пример, как работают анимации на сайте:
В этой статье я написал не все о анимации в CSS, т.к. там реально очень много информации. Когда-то я выпущу полный разбор анимации в CSS.