JSFiddle - React, Tailwind, and code Playground

by c_vilander

HTML

<p>'Play' and 'reverse' an animation</p>

<div class="wrapper"> 

  <button id="start">Play</button>
  
  <button id="reverse">Reverse</button>
  
  <div id="box"></div>
    
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  background: #ccc;
}  
 
.wrapper {
  position: relative;
  top: 2.52em;
  width: 21.7em;
  height: 100%;
  margin: 0 auto;

}

#box {
  position: relative;
  top: 40px;
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border: 1px solid #333;
  border-radius: 15px;
}

#start, #reverse {
  margin: 5px:
}

JavaScript

(function () {
   
    var box = document.getElementById('box'),
        start = document.getElementById('start'),
        reverse = document.getElementById('reverse');
 
    start.onclick = function () {
 
        var player = box.animate([{
            transform: 'rotate(0deg)' + 'scale(1.0)'
        }, {
            transform: 'rotate(180deg)' + 'scale(1.4)'
        }, {
            transform: 'rotate(360deg)' + 'scale(1.0)'
        }
 
        ], {
        duration: 1000,
        iterations: 1
             
        });
          reverse.onclick = function () {
          player.reverse();
    };
 
    };
    
})();