HTML<h1 class="no-transition"> <span>L</span> <span>o</span> <span>a</span> <span>d</span> <span>i</span> <span>n</span> <span>g</span></h1>

**CSS

**/* The hover effect */

span {
 transform-origin: 50% 50% 80px;
 transform: rotateX(0deg);
 position: absolute;
 width: 20px;
}


h1.no-transition span {
  transition: all 0s !important;
  transform: rotateX(0deg) !important;
}


@for $i from 1 through 7 {
  span:nth-child(#{$i}) {
    transition: all 0.7s ease + ' ' + $i /8 + s;
    left: $i * 31 + px;
  }
}


h1:hover span {
  transform: rotateX(360deg);
  color: deeppink;
}


/* Beautifications */


html {
  height: 100%;
}


body {
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  font-family: Monaco, Consolas, "Lucida Console", monospace;
  font-smoothing: antialiased;
  perspective: 700px;
  transform-style: preserve-3d;
  
  background-color: #ffffff;
@include filter-gradient(#ffffff, #eae0de, horizontal);
@include background-image(radial-gradient(center, ellipse cover, #ffffff 0%,#eae0de 100%));
}


h1 {
  position: relative;
  margin-top: -40px;
  top: 50%;
  width: 260px;
  height: 55px;
  margin-left: -130px;
  cursor: pointer; 
  left: 50%;
  font-size: 47px;
  color: #556270;
}


.transition span{
  transform: rotateX(360deg);

}**

JAVASCRIPT

**

var container = document.querySelector( 'h1' );var palette = [ '#4ECDC4', '#A9CF54', '#FF6B6B', '#556270']
var paletteIndex = 0;


setInterval( function() {
  
  // Reset spans rotation without transitions
  container.className = 'no-transition';
  
  // Debounce change to allow for css changes
  setTimeout( function() {
    container.style.color = palette[paletteIndex];
    container.className = 'transition';
    paletteIndex += 1;
    paletteIndex %= palette.length;
  }, 10 );
  
  
}, 2500 );

[color=#ff0000]دمو:[/color] Animated Type Loader - CodePen