Чтобы сделать анимацию на HTML и CSS, нужно добавить в стиль элемента, который хотите анимировать, свойство animation. 5 Это позволит настроить ускорение и продолжительность анимации, а также другие детали того, как она должна протекать. 5

Некоторые свойства анимации:

• animation-name — имя анимации, можно задавать несколько имён через запятую; 1
• animation-direction — направление анимации; 1
• animation-fill-mode — состояние элемента до и после анимации; 1
• animation-play-state — управление состоянием: запуск или приостановка анимации; 1
• animation-timing-function — определяет, как происходит анимация в течение длительности каждого цикла; 1
• animation-delay — задержка начала выполнения анимации; 1
• animation-iteration-count — количество повторов анимации; 1
• animation-duration — длительность. 1

Пример создания анимации для изменения цвета фона у элемента: 3

1. В HTML создайте элемент с классом «element»: 3

<div class='element'></div>

2. В CSS создайте правило для анимации в блоке keyframes: 3

@keyframes changeColor {  0% { background-color: red; }  100% { background-color: blue; }}

3. Теперь добавьте эту анимацию как свойство animation в CSS-стилях для элемента: 3

.element { animation: changeColor 2s infinite; }

Также есть возможность применить к одному элементу сразу несколько анимаций. 4 Для этого нужно перечислить несколько значений через запятую. 4