Wibbly Fiddle

css.css

body{width:100%;background:black}
#bar{border:0;position:absolute;left:0;top:60px;height:30px;width:100%;background-color:green;z-index:10;opacity: 0.95;animation: example3 15s infinite linear;}
#foo11 {  animation-delay:0s; }
#foo10 {  animation-delay:-0.1s; }
#foo9 {  animation-delay:-0.2s; }
#foo8 {  animation-delay:-0.3s; }
#foo7 {  animation-delay:-0.4s; }
#foo6 {  animation-delay:-0.5s; }
#foo5 {  animation-delay:-0.6s; }
#foo4 {  animation-delay:-0.7s; }
#foo3 {  animation-delay:-0.8s; }
#foo2 {  animation-delay:-0.9s; }
#foo1 {  animation-delay:-1s; }

.foo div{
  margin-top:100px;
  font-size: 44px;
  float:left; 
  animation: example 1.3s infinite linear;
  }
.foo{display: table;
    margin: 0 auto;
     animation: example2 8s infinite linear;

  }
@keyframes example {
      0%   {margin-top: 50px;margin-left:20px;	  transform: rotateX(0deg);z-index:300;
}
    25%    {margin-top: 0px;margin-left:0px;	    transform: rotateX(90deg);z-index:0}
      50%  {margin-top: 50px;margin-left:20px;     	transform: rotateX(180deg);z-index:0}
    75%    {margin-top: 100px;margin-left:30px;	    transform: rotateX(270deg);z-index:0; }
      100% {margin-top: 50px;margin-left:20px;	  transform: rotateX(360deg);z-index:300}
    
}

@keyframes example2 {
      0%   {
        margin-left:0px;
        color: #B616F6;
        text-shadow: none;  
     }
    25%    {
      margin-left:180px;
      color: #fff;  
      text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; 
    }
      50%  {
        margin-left:0px;
        color: orange;  
        text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff; 
    }
    75%    {
      margin-left:60px;
      color: #fff;  
      text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;
    }
      100% {
        margin-left:0px;
        color: #B616F6;
        text-shadow: none; 
        }
}
@keyframes example3 {
      0%   {background-color:green;}
    25%    {background-color:orange;}
      50%  {background-color:blue;}
    75%    {background-color:pink;}
      100% {background-color:green;}
    
}

html.html

<hr id="bar">
<div class="foo">
<div id="foo1">
  S
</div>
<div id="foo2">
  A
</div>
<div id="foo3">
  L
</div>
<div id="foo4">
  A
</div>
<div id="foo5">
  M
</div>
<div id="foo6">
  I
</div>
<div id="foo7">
  S
</div>
<div id="foo8">
  U
</div>
<div id="foo9">
  S
</div>
<div id="foo10">
  H
</div>
<div id="foo11">
  I
</div>
</div>

alive demo https://jsfiddle.net/gaby_de_wilde/fvL9sqke/14/