<h3>Web Animation API Example using Animation() Constructor (<a href="http://www.javascriptkit.com/javatutors/web-animation-api-tutorial.shtml" target="_new">Tutorial</a>)</h3>
<p>Animation() Constructor function not well supported natively even in Chrome and Firefox at time of writing. <b>Rerun code if you missed it.</b></p>
<p>Using web-animations-next polyfill to get it to work: <a href="https://github.com/web-animations/web-animations-next">https://github.com/web-animations/web-animations-next</a> </p>
<div id="box"></div>#box{
width: 50px;
height: 50px;
background: red;
}var boxref = document.getElementById("box")
var boxkeyFrames = new KeyframeEffect(
boxref, // element to animate
[
{ transform: 'translateX(0) rotate(0deg)', background:'red' }, // keyframe
{ transform: 'translateX(90vw) rotate(180deg)', background:'blue' }
],
{ duration: 2000, fill: 'forwards' } // keyframe options
);
var boxanimation = new Animation(boxkeyFrames, document.timeline)
boxanimation.play()
External CSS
This Pen doesn't use any external CSS resources.