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>

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%;
  }
}