# animation-play-state property

The `animation-play-state` property allows you to set the animation state: it is playing or paused.

## Syntax

`selector { animation-play-state: paused | running; }`

## Values

Value | Description
--- | ---
`paused` | An animation is paused.
`running` | An animation is playing.

Default value: `running`.

## Example

In this example, the animation will start when the mouse hovers over the element and stop when the mouse is removed from the element:

`<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; }`

:

## Example . Hovering over another element

And now the animation will be launched by hovering the mouse over another element, and will stop when the mouse is removed from it:

`<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; }`

:

## See also

- the `animation-name` property
  that specifies an animation name
- the `animation-duration` property
  that sets an animation duration
- the `animation-delay` property
  that sets a delay before an animation
- the `animation-timing-function` property
  that sets an animation speed
- the `animation-iteration-count` property
  that specifies a number of animation iterations
- the `animation-direction` property
  that sets an animation direction
- the `animation-fill-mode` property
  that sets an animation state
- the `animation` property
  that is a shorthand for animation
- the `@keyframes` at-rule
  that set keyframes for an animation
- a smooth `transition`, representing an animation when hovering over an element

← →
↑
en ru