<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';}