CSS animation-play-state

on Mar 24, 2016

CSS animation-play-state property defines whether the animation is running or paused. When a paused animation is resumed, it restarts from the current value instead of beginning of the animation.

In case animation-name has multiple values, animation-play-state can also have multiple values.

CSS property animation-play-state

CSS version:	CSS 3
Value:	[running \| paused] [, ...]*
Initial:	running
Applies to:	all elements, ::before and ::after pseudo-elements
Inherited:	no

Example – animation-play-state

<style>
@keyframes left-to-right {
  0% {left:0;}
  100% {left:200px;}
}
.box {
  position:fixed; background-color:lightgreen;
  animation-name: left-to-right;
  animation-duration: 4s;
  animation-iteration-count:infinite;
  animation-play-state: running;
}
</style>

<div class=box>Object</div>
<br/><br/><button onclick="toggleState()">toggle running/paused</button>
<script>
function toggleState() {
  var el = document.querySelector(".box");
  if (window.getComputedStyle(el).animationPlayState == 'running') {
    el.style.animationPlayState = 'paused';
  } else {
    el.style.animationPlayState = 'running';
  }
}
</script>

refresh

try it online