Text animation using css

Redxcyber

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Indie+Flower&display=swap');
     *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background: #111;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        font-family: 'Fredoka One', impact;
      }
      h1 {
        font-size: 70px;
        color: rgb(200,200,210);
        height: 100px;
       
      }
      span {
        position: relative;
        top: 40px;
        animation: move 0.5s ease-in-out infinite alternate;
       
      }
      span:nth-child(1){
        animation-delay: 0.1s;
      }
      span:nth-child(2){
        animation-delay: 0.25s;
      }
      span:nth-child(3){
        animation-delay: 0.4s;
      }
      span:nth-child(4){
        animation-delay: 0.55s;
      }
      span:nth-child(5){
        animation-delay: 0.7s;
      }
      @keyframes move {
        100%{
          top: -30px;
          text-shadow: 0 3px red, 0 6px grey, 0 9px gold, 0 11px green, 0 13px purple, 0 14px cyan, 0 15px orangered;
        }
      }
     
    </style>
  </head>
  <body>
    <h1>
      <span>C</span>
      <span>O</span>
      <span>D</span>
      <span>E</span>
      <span>X</span>
    </h1>
  </body>
</html>