<ul>
               <li>l</li>
               <li>o</li>
               <li>a</li>
               <li>d</li>
               <li>i</li>
               <li>n</li>
               <li>g</li>
           </ul>

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
*{
    padding: 0;
    margin: 0; 
    font-family: 'Quicksand', sans-serif;
}
body{
    background: #262626;
}
ul{
    position: absolute;
    top: 50%;   left: 50%;
    transform: translate(-50%,-50%) skewY(-10deg);
    width: 500px;  height: 100px;
    background: #f00;
    border: 5px solid #fff;
    overflow: hidden;
}
ul li{
    position: relative;
    list-style: none;
    display: inline-block;
    margin-left: -5px;
    width: calc(100% / 7);   height: 100%;
    color: #fff;
    text-align: center;
    font-size: 60px;
    text-transform: uppercase;
    line-height: 100px;
    animation: animate 2s infinite linear;
}

@keyframes animate{
   0%{
      transform: translateY(-80px) rotateY(0);
   }
   40%{
      transform: translateY(0px) rotateY(360deg);
    }
    50%{
        transform: translateY(-15px) rotateY(360deg);  
    }
    60%{
        transform: translateY(0px) rotateY(360deg);
    }
    70%{
        transform: translateY(-15px) rotateY(360deg);
    }
    100%{
        transform: translateY(80px) rotateY(0);
    }
}

ul li:nth-of-type(1){
    animation-delay: 0s;
}
ul li:nth-of-type(2){
    animation-delay: .1s;
}
ul li:nth-of-type(3){
    animation-delay: .2s;
}
ul li:nth-of-type(4){
    animation-delay: .3s;
}
ul li:nth-of-type(5){
    animation-delay: .4s;
}
ul li:nth-of-type(6){
    animation-delay: .5s;
}
ul li:nth-of-type(7){
    animation-delay: .6s;
}