JSFiddle - React, Tailwind, and code Playground

by oraclepadawan

HTML

<html>
   <head>
      <style type = "text/css">
         h1 {
            -moz-animation-duration: 3s;
            -webkit-animation-duration: 3s;
            -moz-animation-name: slidein;
            -webkit-animation-name: slidein;
         }
         @keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            55% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
         @keyframes slidein {
            from {
               margin-left:100%;
               width:300%
            }
            55% {
               font-size:300%;
               margin-left:25%;
               width:150%;
            }
            to {
               margin-left:0%;
               width:100%;
            }
         }
      </style>
   </head>

   <body>
      <h1>Animación</h1>
      
      <p>otro ejemplo de animación</p>
      <button onclick = "funcion()">recargar página</button>
      <script>
         function funcion() {
            location.reload();
         }
      </script>
   </body>
</html>