CSS animation-play-state Property

The CSS animation-play-state property defines whether the animation is running or paused.

Demo:




Click the buttons to Play/Pause the animation:


function myPauseFunction() { document.getElementById("myDIV").style.animationPlayState = "paused"; }


Syntax:

animation-play-state: paused|running;

paused - defines that the animation is paused.

running (default) - defines that the animation is running.

Example:

<!DOCTYPE html> <html> <head> <style>  .square {   width: 100px;   height: 100px;   background: #2a9d8f;   position: relative;   animation: move-right 4s infinite; }  .square:hover {   animation-play-state: paused; }  @keyframes move-right {   from {left: 0px;}   to {left: 250px;} } </style> </head> <body>  <div class="square"></div>  </body> </html>

Output:

Hover over the square to stop the animation:






Enjoy coding!