<h3>Web Animation API Playback Controls Example</h3>
<p>Click on the controls to play back the DIV animation:</p>

<div id="box"></div>

<br />
<button onClick="boxanimation.play()">Play</button> 
<button onClick="boxanimation.reverse()">Reverse</button>
<button onClick="boxanimation.pause()">Pause</button>
<button onClick="boxanimation.playbackRate = 0.5">Slow Down Animation</button>
<button onClick="boxanimation.playbackRate = 1">Normal Speed</button>

#box{
	width: 100px;
	height: 100px;
	background: red;
}

button{
  font-size: 16px;
  margin-right: 8px;
}

var boxframes = [
	{ 
		transform: 'translateX(0)',
		background: 'red',
		borderRadius: 0
	},
	{ 
		transform: 'translateX(200px) scale(.5)', 
		background: 'orange',
		borderRadius: 0,
    offset: 0.6
	},
	{
		transform: 'translateX(400px)',
		background: 'green',
		borderRadius: '50%'
	}
]

var boxref = document.getElementById("box")

var boxanimation = boxref.animate(boxframes, {
    duration: 1000,
    fill: 'both',
    easing: 'ease-in'
})

boxanimation.pause()