CSS animation

Что такое CSS анимация?

Как и CSS свойство плавных переходов transition, о котором мы говорили в предыдущем уроке, свойство animation призвано сделать нашу верстку более динамичной, оживить её для лучшего взаимодействия с пользователем и создания WOW эффекта.

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

Другими словами, использование конструкции animation и @keyframes позволяет нам создавать более сложные сценарии анимаций.

animation-name определяет список применяемых к элементу анимаций (ключевых кадров). Можно указать через запятую. Причем приоритет у последней записи.

animation-duration отвечает за продолжительность анимации.

animation-timing-function задаёт сценарий развития анимации между ключевыми кадрами.

animation-iteration-count отвечает за повтор проигрывания ключевых кадров.

animation-direction определяет направление и тип проигрывания ключевых кадров.

animation-play-state позволяет запускать или останавливать анимацию по событию.

animation-delay отвечает за задержку перед проигрыванием.

animation-fill-mode определяет какие значения анимируемых css свойств применятся к объекту после завершения анимации.

.animation__element{
  animation-name: rotate;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-play-state: running;
  animation-delay: 0s;
  animation-fill-mode: none;
}

или универсальная запись

.animation__element{
 animation: rotate 1s ease infinite normal running 1s both;
}

Подробная статья с примерами: https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Animations