Wingardium leviosa

Fontawesome animations that make sense!

by Andy Challis

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<i class="fa fa-magic fa-4x wand"></i>

CSS

@keyframes  magic {
    15% { color: red; } 
    30% { color: yellow; } 
    45% { color: green; } 
    60% { color: blue; }
    100% { color: white; opacity: 0;}  
}

@-webkit-keyframes magic {
    15% { color: red; } 
    30% { color: yellow; } 
    45% { color: green; } 
    60% { color: blue; }
    100% { color: white; opacity: 0;}
}

.wand {
  color:#444;
}

.wand:hover{
  -webkit-animation: magic 5s;
  animation-delay: 0s;
  animation: magic 5s;
  animation-fill-mode: forwards;
}