# Свойство animation-name

Свойство `animation-name` задает имя анимации (или анимаций), которая будет применяться к данному элементу. Имя анимации должно быть такое же, какое задано при определении ключевых кадров `@keyframes`.

## Синтаксис

`селектор { animation-name: имя анимации; }`

## Пример

В данном примере анимация имеет имя `move`:

`<div id="elem"></div>` `@keyframes move { from { margin-left: 0px; } to { margin-left: 400px; } } #elem { animation-name: move; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; }`

:

## Смотрите также

- свойство `animation-duration`,
  которое задает продолжительность анимации
- свойство `animation-delay`,
  которое задает задержку перед выполнением анимации
- свойство `animation-timing-function`,
  которое задает скорость выполнения анимации
- свойство `animation-iteration-count`,
  которое задает количество итераций анимации
- свойство `animation-direction`,
  которое задает направление анимации
- свойство `animation-fill-mode`,
  которое задает состояние анимации
- свойство `animation-play-state`,
  которое позволяет поставить анимацию на паузу
- свойство `animation`,
  представляющее собой сокращение для анимаций
- команду `@keyframes`,
  задающую ключевые кадры анимации
- плавные переходы `transition`, представляющие собой анимацию по наведению на элемент

←→
↑