JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<div id="elem"></div>

CSS

#elem {
  width: 100px;
  height: 100px;
  background-color: red;
}

JavaScript

var ani = document.getElementById('elem').animate([
    { transform: 'scale(1)', opacity: 1, offset: 0 },
    { transform: 'scale(.5)', opacity: .5, offset: .3 },
    { transform: 'scale(.667)', opacity: .667, offset: .7875 },
    { transform: 'scale(.6)', opacity: .6, offset: 1 }
  ], {
    duration: 700, //milliseconds
    easing: 'ease-in-out', //'linear', a bezier curve, etc.
    delay: 10, //milliseconds
    iterations: 1, //or a number
    direction: 'alternate', //'normal', 'reverse', etc.
    fill: 'forwards' //'backwards', 'both', 'none', 'auto'
  });
  
console.log(ani);

ani.onfinish = x => console.log('done');