<h3>Web Animation API Example</h3>
<p>Click on DIV to animate it using native JavaScript's animate() method:</p>

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

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

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")

function animatebox(){
  boxref.animate(boxframes, {
      duration: 1000,
      fill: 'forwards',
      easing: 'ease-in'
  })
}

boxref.addEventListener('click', function(){
  animatebox()
}, false)