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