Как добавить анимацию в CSS

Для добавления анимации в CSS необходимо использовать свойство animation. Например, чтобы создать анимацию, которая будет менять цвет фона элемента от красного до синего, можно использовать следующий код:

div {
  background-color: red;
  animation-name: changeColor;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

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

В этом примере мы создаем анимацию с именем changeColor, которая будет длиться 2 секунды и повторяться бесконечно. Анимация определяется с помощью ключевых кадров (keyframes), которые задают стили элемента на разных этапах анимации. В данном случае мы определяем три ключевых кадра: на 0%, 50% и 100%. На 0% и 100% фон элемента будет красным, а на 50% – синим.