var elem = document.querySelector("#box");
var player = elem.animate([
{offset: 0, margin: "0px 0px 0px 90%"},
{offset: 1/2, margin: "0px 0px 0px 10%"},
{offset: 1, margin: "0px 0px 0px 90%"}
], {
duration: 5000,
iterations: Infinity
});
function pause()
{
player.pause();
}
function play()
{
player.play();
}
function stop()
{
player.cancel();
}
<div class="box" id="box"></div>
<button onclick="pause();">Pause</button>
<button onclick="play();">Play</button>
<button onclick="stop();">Stop</button>
.box
{
width:200px;
height:200px;
background:rgba(0,0,255,0.5);
}
External resources loaded into this fiddle: