Secret Agent

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 spy">
  <i class="fa fa-square fa-stack-2x spy-background"></i>
  <i class="fa fa-user-secret fa-stack-1x animate"></i>
</span>

CSS

.spy .animate{
  opacity: 0;
  color: red;
  -webkit-transition:all 3s ease;
  -moz-transition:all 3s ease;
  transition:all 3s ease;
}

.spy:hover .animate{
  opacity:1;
}

.spy-background{
  color:#444;
}