JSFiddle - React, Tailwind, and code Playground

by Evan Raskob

HTML

<!-- from https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations
-->

<h1>Flying text!</h1>

<p>this shows flying text.</p>
<div id="watchme">result</div>

CSS

h1 {
  animation-duration: 3s;
  animation-name: slidein;
  font-size: 3em;
  font-weight: bold;
}
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

JavaScript

var watcher = document.getElementById("watchme");
console.log(watcher);

function displayit (e) {
  document.getElementById("watchme").innerHTML = e.type + ' ' + e.elapsedTime;
}

watcher.addEventListener("animationiteration", displayit, false);