<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="pool" style="position:relative;
height:120px; width:120px; border-radius:50%;
background-image: radial-gradient(circle at 30% 30%, #009999, #000) ;">
</div>
<br>
<input type="button"value="Animate" onclick=
"document.getElementById('pool').className='move';">
<input type="button" value="Pause" onclick=
"pause()">
<input type="button" value="Resume" onclick="resume()">
@-webkit-keyframes move {
0% {-webkit-transform:translate(20px);
background-image: radial-gradient(circle at 30% 30%, #CC0000, #000) ;
-webkit-animation-timing-function: linear;}
25% {-webkit-transform:translate(120px);
background-image: radial-gradient(circle at 30% 30%, #009933, #000) ;
-webkit-animation-timing-function: linear;}
50% {-webkit-transform:translate(220px);
background-image: radial-gradient(circle at 30% 30%, #6600CC, #000) ;
-webkit-animation-timing-function: linear;}
75% {-webkit-transform:translate(320px);
background-image: radial-gradient(circle at 30% 30%, #996633, #000) ;
-webkit-animation-timing-function: linear;}
100% {-webkit-transform:translate(420px);
background-image: radial-gradient(circle at 30% 30%, #009999, #000) ;}
}
@keyframes move {
0% {transform:translate(20px);
background-image: radial-gradient(circle at 30% 30%, #CC0000, #000) ;
animation-timing-function: linear;}
25% {transform:translate(120px);
background-image: radial-gradient(circle at 30% 30%, #009933, #000) ;
animation-timing-function: linear;}
50% {transform:translate(220px);
background-image: radial-gradient(circle at 30% 30%, #6600CC, #000) ;
animation-timing-function: linear;}
75% {transform:translate(320px);
background-image: radial-gradient(circle at 30% 30%, #996633, #000) ;
animation-timing-function: linear;}
100% {transform:translate(420px);
background-image: radial-gradient(circle at 30% 30%, #009999, #000) ;}
}
.move {
animation-name: move;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
/* Prefix for Webkit*/
-webkit-animation-name: move;
-webkit-animation-duration: 2s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
function pause(){
document.getElementById('pool').style.animationPlayState='paused';
document.getElementById('pool').style.webkitAnimationPlayState='paused';}
function resume(){
document.getElementById('pool').style.animationPlayState='running';
document.getElementById('pool').style.webkitAnimationPlayState='running';}