JSFiddle - React, Tailwind, and code Playground

by HYEONGJINKIM

HTML

<head>
  <title>CSS animations: Animation events</title>
  <style type="text/css">
    .slidein {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
      -moz-animation-iteration-count: 3;
      -webkit-animation-iteration-count: 3;
      -moz-animation-direction: alternate;
      -webkit-animation-direction: alternate;
    }
    
    @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }
    
    @-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }

  </style>
  <script>
    var listener = function(e) {
      var l = document.createElement("li");
      switch(e.type) {
        case "webkitAnimationStart":
          l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
          break;
        case "animationstart":
          l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
          break;
        case "webkitAnimationEnd":
          l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
          break;
          case "animationend":
          l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
          break;
        case "webkitAnimationIteration":
          l.innerHTML = "New loop started at time " + e.elapsedTime;
          break;
        case "animationiteration":
          l.innerHTML = "New loop started at time " + e.elapsedTime;
          break;
      }
      document.getElementById("output").appendChild(l);
    }
    
var setup = function() {
      var e = document.getElementById("watchme");
      e.addEventListener("webkitAnimationStart", listener, false);
            e.addEventListener("animationstart", listener, false);
      e.addEventListener("webkitAnimationEnd", listener, false);
     ...