Animation css что это

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

Синтаксис для применения свойства animation:

selector {
  animation: <animation-name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>;
}

Значения, используемые в свойстве animation:

• <animation-name> — имя анимации, которое нужно определить, используя ключевое слово @keyframes.
• <duration> — длительность анимации в секундах или миллисекундах.
• <timing-function> — определяет плавность изменения анимации, используя функцию смещения (ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier).
• <delay> — задержка перед началом анимации.
• <iteration-count> — количество повторений анимации (число или ключевое слово infinite).
• <direction> — задает, как анимация должна повторяться (normal, alternate, alternate-reverse).
• <fill-mode> — установка стилей для начальной и конечной фаз анимации (none, forwards, backwards, both).
• <play-state> — определяет, находится ли анимация в работе или стоит (running, paused).

Например, следующий код создает анимацию, которая повторяется бесконечно и вращает элемент:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.selector {
  animation: rotate 2s linear infinite;
}

Это приведет к созданию нового имени анимации rotate. Он будет повторятся бесконечно и с помощью transform элемент будет вращаться. Таким образом, анимация начнется в момент подключения стилей и продолжится бесконечно в течение 2 секунд.

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