Take off

Fontawesome animations that make sense!

by Andy Challis

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-rocket fa-4x rocket"></i>

CSS

@-webkit-keyframes takeoff {
  0% {
    opacity: 1;
    -webkit-transform: translate(0,0) rotate(-45deg);
    -ms-transform: translate(0,0) rotate(-45deg);
    transform: translate(0,0) rotate(-45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0,-100%) rotate(-45deg);
    -ms-transform: translate(0,-100%) rotate(-45deg);
    transform: translate(0,-100%) rotate(-45deg);
  } 
}

@keyframes takeoff {
  0% {
    opacity: 1;
    -webkit-transform: translate(0,0) rotate(-45deg);
    -ms-transform: translate(0,0) rotate(-45deg);
    transform: translate(0,0) rotate(-45deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(0,-100%) rotate(-45deg);
    -ms-transform: translate(0,-100%) rotate(-45deg);
    transform: translate(0,-100%) rotate(-45deg);
  } 
}

.rocket {
  color:#b19cd9;
  transform: rotate(-45deg);
}
.rocket:hover {
  -webkit-animation: takeoff 2s;
  animation-delay: 0s;
  animation: takeoff 2s;
  animation-fill-mode: forwards;
}