A Pen by Leonardo Lima.

CSS-animation-color.markdown

CSS animation color

A Pen by Leonardo Lima on CodePen.

License.

index.html

<div class="letter">
  <span class="red">C</span>
  <span class="red">S</span>
  <span class="red">S</span>
</div>

style.less

/*var*/
@red:red;
@blue:blue;
@yellow:yellow;

html, body{margin:0px;padding:0px;}
.red{transition:2s;float:right;margin-right:20em;font-size:36px;font-weight:bold;}
div{
-webkit-animation: myfirst 2s linear 2s infinite alternate;
-o-animation: myfirst 2s linear 2s infinite alternate;
-moz-animation: myfirst 2s linear 2s infinite alternate;
 animation: myfirst 2s linear 2s infinite alternate;
}
.red:hover{color:@red;cursor:pointer;} 
.letter:hover{color:@blue;}

/*animation*/
@-webkit-keyframes myfirst {
    from {color: @red;}
    to  {color: @yellow;}
} 
@-moz-keyframes myfirst {
    from {color: @red;}
    to {color: @yellow;font-size:10px;}
}
@-o-keyframes myfirst {
    from {color: @red;}
    to {color: @yellow;font-size:10px;}
}
@keyframes myfirst {
    from {color: @red;}
    to {color: @yellow;font-size:10px;}
}