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


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/641/web-animations-next.min.js