# Свойство animation-play-state

Свойство `animation-play-state` позволяет задать состояние анимации: она проигрывается или стоит на паузе.

## Синтаксис

`селектор { animation-play-state: paused | running; }`

## Значения

Значение | Описание
--- | ---
`paused` | Анимация стоит на паузе.
`running` | Анимация проигрывается.

Значение по умолчанию: `running`.

## Пример

В данном примере анимация будет запускаться по наведению мышкой на элемент, а прекращаться, когда мышь будет убираться с элемента:

`<div id="elem"></div>` `@keyframes move { from { width: 200px; } to { width: 400px; } } #elem { animation-play-state: paused; animation-duration: 1s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; height: 50px; } #elem:hover { animation-play-state: running; }`

:

## Пример . Наведение на другой элемент

А сейчас анимация будет запускаться наведением мыши на другой элемент, а при убирании с него мыши - прекращаться:

`<div id="target"></div> <div id="elem"></div>` `@keyframes move { from { margin-left: 0; } to { margin-left: 400px; } } #target { border: 1px solid red; margin-bottom: 10px; width: 50px; height: 50px; } #elem { animation-play-state: paused; animation-duration: 3s; animation-name: move; animation-iteration-count: infinite; animation-timing-function: linear; border: 1px solid black; width: 50px; height: 50px; } #target:hover + #elem { animation-play-state: running; border: 1px solid green; }`

:

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

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

←→
↑