Jitterbug

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-bug fa-4x jitter-bug'></i>

CSS

@-webkit-keyframes jitter {
  0% {
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
  }

  50% {
    -webkit-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }
  
  100% {
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
  }
}

@keyframes jitter {
  0% {
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
  }

  50% {
    -webkit-transform: rotate(-24deg);
    -ms-transform: rotate(-24deg);
    transform: rotate(-24deg);
  }
  
  100% {
    -webkit-transform: rotate(24deg);
    -ms-transform: rotate(24deg);
    transform: rotate(24deg);
  }
}


@-webkit-keyframes run-away {
  0% {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0,-100%);
    -ms-transform: translate(0,-100%);
    transform: translate(0,-100%);
  } 
}

@keyframes run-away {
  0% {
    opacity: 1;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    transform: translate(0,0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0,-100%);
    -ms-transform: translate(0,-100%);
    transform: translate(0,-100%);
  } 
}

.jitter-bug {
  color: green;
}

.jitter-bug:hover {
  -webkit-animation: jitter 0.25s linear infinite;
  animation: jitter 0.25s linear infinite;
}

.jitter-bug:active {
  -webkit-animation: run-away 0.5s;
  animation-delay: 0s;
  animation: run-away 0.5s;
  animation-fill-mode: forwards;
}