Animation values are strongest !

dabblet.css

/**
 * Animation values are strongest !
 */
 
/*
 * just hover the white space to stop the animation
 * and and return the block to its original coordinates 
 */
 
html,body { height:100%; }
div {
position: absolute;
top:0; left:0;
width: 100px; height: 100px;
background: #999;
animation: 10s anim infinite;
transition: all 2s; /* see the block back to its original coordinates, and back again in last "animation" coordinates*/
}
@keyframes anim {
   0%, 100% { left: 0; top:0; }
   25% { left: 200px; top:0 }
   50% { left: 200px; top:200px }
   75% { left:0; top:200px; }
}
body:hover div {
   animation-play-state: paused;
   top:0 !important; left:0 !important;
   background: #ff9999;
}

dabblet.html

<div>&nbsp;</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}