JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<!doctype html>
<html>
<head>
  <title>CSS animations: Example 4</title>
  <style type="text/css">
    a {font-size:40px;
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
      -moz-animation-iteration-count: 1;
      -webkit-animation-iteration-count: 1;
      -moz-animation-direction: alternate;
      -webkit-animation-direction: alternate;
    }
    
    @-moz-keyframes slidein {
      from {
      font-size:0%;
        margin-left:-100%;
        width:300%
      }
      
      75% {
        font-size:300%;
        margin-left:-25%;
        width:150%;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }
    
    @-webkit-keyframes slidein {
      from {
      font-size:0%;
        margin-left:-100%;
        width:300%
      }
      
      75% {
        font-size:300%;
        margin-left:-25%;
        width:150%;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }

  </style>
</head>
<body>
    <h1><a>Watch me move</a></h1>
  <p>This example shows how to use CSS animations to make <code>H1</code> elements
  move across the page. Here, we've added an extra keyframe to make the text change size as it goes.</p>
</body>
</html>