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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

1. https://rawgit.com/web-animations/web-animations-js/master/web-animations.min.js