Glowing lightbulb

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-4x">
  <i class="fa fa-square fa-stack-2x lightbulb-background"></i>
  <i class='fa fa-lightbulb-o fa-stack-1x lightbulb'></i>
</span>

CSS

.lightbulb {
  color: white;
  opacity: 0.9;
}

.lightbulb-background {
  color: #444;
}

.lightbulb:hover {
  color: white;
  text-shadow: 0px 0px 1px #ffffff;
  animation: glow 0.5s;
  -moz-animation: glow 0.5s;
  /* Firefox */
  -webkit-animation: glow 0.5s;
  /* Safari and Chrome */
  animation-fill-mode: forwards;
}

@keyframes glow
/* Firefox */

{
  0% {
    opacity: 0.9;
    color: #FFFFFF;
  }
  20% {
    opacity: 0.92;
    color: #FFFFCC;
    text-shadow: 0px 0px 2px #ffff00;
  }
  40% {
    opacity: 0.94;
    color: #FFFFCC;
    text-shadow: 0px 0px 2px #ffff00, 0px 0px 4px #ffff00;
  }
  60% {
    opacity: 0.96;
    color: #FFFFCC;
    text-shadow: 0px 0px 2px #ffff00, 0px 0px 4px #ffff00, 0px 0px 6px #ffff00;
  }
  80% {
    opacity: 0.98;
    color: #FFFFCC;
    text-shadow: 0px 0px 2px #ffff00, 0px 0px 4px #ffff00, 0px 0px 6px #ffff00 0px 0px 8px #ffff00;
  }
  100% {
    opacity: 1;
    color: #FFFFCC;
    text-shadow: 0px 0px 2px #ffff00, 0px 0px 4px #ffff00, 0px 0px 6px #ffff00, 0px 0px 8px #ffff00, 0px 0px 10px #ffff00;
  }
}