Categories
CSS Web development

CSS animation-play-state Property

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:




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!