CSS awesome animation float

<html>
<head>
 <STYLE type="text/css">
body{
  background: #CCD0D4;
}
h1.loader{
  text-align: center;
  text-transform: uppercase;
  font-family: 'Helvetica';
  font-size: 1.6875em;
  color: transparent;
  letter-spacing: 0.01em;
}
.loader span{
  text-shadow:
    0 0 2px rgba(204, 208, 212,0.9),
    0 15px 25px rgba(0, 0, 0, 0.3),
    0 -2px 3px rgba(0, 0, 0, 0.1),
    0 -5px 10px rgba(255, 255, 255, 0.5),
    0 5px 10px rgba(0, 0, 0, 0.3),
    0 3px 4px rgba(255, 255, 255, 0.2),
    0 0 20px rgba(255, 255, 255, 0.45);

    animation: loading 0.95s ease-in-out infinite alternate;
}

@keyframes loading {
    to {text-shadow:
    0 0 2px rgba(204, 208, 212,0.2),
    0 0 3px rgba(0, 0, 0, 0.02),
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(255, 255, 255, 0),
    0 0 0 rgba(0, 0, 0, 0),
    0 0 0 rgba(255, 255, 255, 0),
    0 0 0 rgba(255, 255, 255, 0);}
}

.loader span:nth-child(2){
  animation-delay:0.15s;
}
.loader span:nth-child(3){
  animation-delay:0.30s;
}
.loader span:nth-child(4){
  animation-delay:0.45s;
}
.loader span:nth-child(5){
  animation-delay:0.60s;
}
.loader span:nth-child(6){
  animation-delay:0.75s;
}
.loader span:nth-child(7){
  animation-delay:0.90s;
}
</style>
</head>
<body>
<h1 class="loader">
  <span>J</span>
  <span>A</span>
  <span>M</span>
  <span>E</span>
  <span>S</span>
  <span>C</span>
  <span>A</span>
  <span>M</span>
  <span>P</span>
  <span>B</span>
  <span>E</span>
  <span>L</span>
  <span>L</span>
</h1>
</body>
</html>