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