Lightning bolt

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">
<span class="fa-stack fa-5x bolt">
  <i class="fa fa-bolt fa-stack lightning-background"></i>
  <i class='fa fa-bolt fa-stack animate'></i>
</span>

CSS

.bolt .animate{
  height:0%; 
  position:absolute;
  top:5%; 
  overflow: hidden;
  color:yellow;
  -webkit-transition:all 1s ease;
  -moz-transition:all 1s ease;
  transition:all 1s ease;
  left: 0px;
}

.bolt:hover .animate{
  height:100%;
}

.lightning-background {
  color: #444;
}