<body>
  <span>L</span>
  <span>O</span>
  <span>A</span>
  <span>D</span>
  <span>I</span>
  <span>N</span>
  <span>G</span>
  
</body>
*{
  margin:0;
  padding:0;
  font-weight:bolder;
}
body{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  background-color:#333;
  
}
span{
  font-size:30px;
  margin:5px;
}
span:nth-child(1){
  color:red;
  animation:l 1s linear infinite;
}
span:nth-child(3){
  color:green;
  animation:l 1s 0.33s linear infinite;
}
span:nth-child(4){
  color:red;
  animation:l 1s 0.47s linear infinite;
}
span:nth-child(5){
  color:orange;
  animation:l 1s 0.24s linear infinite;
}
span:nth-child(6){
  color:cyan;
  animation:l 1s 0.3s linear infinite;
}
span:nth-child(7){
  color:magenta;
  animation:l 1s 0.19s linear infinite;
}
span:nth-child(2){
  color:blue;
  animation:l 1s 0.11s linear infinite;
}
@keyframes l{
  0%{
    transform:translateY(-14px)
  }
  50%{
    
    transform:rotateY(90deg);
  }
  100%{
    transform:translateY(-14px);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.