Несколько уроков назад мы рассматривали тему CSS-переходов (свойство transition), которые позволяют добавлять плавность при изменении многих CSS-свойств элементов. Но в плавных переходах есть несколько минусов: CSS-анимация придаёт сайтам намного большую динамичность, оживляя веб-страницы и значительно улучшая взаимодействие с пользователем. В отличие от CSS переходов, анимация базируется на ключевых кадрах, которые позволяют автоматически воспроизводить и повторять эффекты на протяжении заданного времени, а также останавливать анимацию внутри цикла. Анимация может применяться практически для всех html-элементов, а также для псевдоэлементов ::before и ::after...

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