CSS animation-play-state Property - Playground Example

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.test {
   width: 100px; 
   height: 100px; 
   color: white;
   background: green;
   position: relative;
   animation-name: iliketomoveit; 
   animation-duration: 5s; 
   animation-iteration-count: infinite; 
   animation-play-state: running;
} 
.test:hover {
   animation-play-state: paused; 
} 
 @keyframes iliketomoveit {
   0% { 
      left: 0px;  
   } 
   25% { 
      left: 400px;  
   } 
   75% { 
      left: 200px;  
   } 
   100% { 
      left: 0px;  
   } 
 } 
</style>
</head>
<body>
<div class="test">Hover over me!</div>
</body>
</html>