WebAnimations API (JS - element.animate())

Lets you create animations that are run in the browser and as well as inspect and manipulate animations created through declarative means like CSS.

by Konstantin Rouda

HTML

<DIV>
HEllo
</DIV>

CSS

* {
  box-sizing: border-box;
}

DIV {
  width: 300px; height: 300px;
  background: indianred;
  margin: 2em 0;
}

JavaScript

;(function() {
"use strict";

const div = document.querySelector("div");


  div.animate(
  [  /*keyframes*/
    {transform: "translateX(0%)", opacity: 0.1},
    {transform: "translateX(250%)", opacity: 1}
  ],
  { /*options*/
    duration: 1500,
    iterations: 1,
    fill: "forwards"
  });

/*
https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats

*/


})();