feat(#33): add faa-reverse + use SCSS variable for speed

css/font-awesome-animation.css

@@ -3,10 +3,7 @@
   0%, 10%, 20%, 50%, 80%, 100% {
     transform: translateY(0);
   }
-  40% {
+  40%, 60% {
-    transform: translateY(-15px);
-  }
-  60% {
     transform: translateY(-15px);
   }
 }
@@ -15,11 +12,26 @@
   0%, 10%, 20%, 50%, 80%, 100% {
     transform: translateY(0);
   }
-  40% {
+  40%, 60% {
     transform: translateY(-15px);
   }
-  60% {
+}
-    transform: translateY(-15px);
+
+@-webkit-keyframes bounce-reverse {
+  0%, 10%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40%, 60% {
+    transform: translateY(15px);
+  }
+}
+
+@keyframes bounce-reverse {
+  0%, 10%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40%, 60% {
+    transform: translateY(15px);
   }
 }
 
@@ -44,6 +56,27 @@
           animation: bounce 3s ease infinite;
 }
 
+.faa-bounce.faa-reverse.animated,
+.faa-bounce.faa-reverse.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-bounce.faa-reverse {
+  -webkit-animation: bounce-reverse 2s ease infinite;
+          animation: bounce-reverse 2s ease infinite;
+}
+
+.faa-bounce.faa-reverse.animated.faa-fast,
+.faa-bounce.faa-reverse.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-bounce.faa-reverse.faa-fast {
+  -webkit-animation: bounce-reverse 1s ease infinite;
+          animation: bounce-reverse 1s ease infinite;
+}
+
+.faa-bounce.faa-reverse.animated.faa-slow,
+.faa-bounce.faa-reverse.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-bounce.faa-reverse.faa-slow {
+  -webkit-animation: bounce-reverse 3s ease infinite;
+          animation: bounce-reverse 3s ease infinite;
+}
+
 @-webkit-keyframes burst {
   0% {
     opacity: .6;
@@ -121,6 +154,36 @@
   }
 }
 
+@-webkit-keyframes falling-reverse {
+  0% {
+    transform: translateY(50%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-50%);
+    opacity: 0;
+  }
+}
+
+@keyframes falling-reverse {
+  0% {
+    transform: translateY(50%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-50%);
+    opacity: 0;
+  }
+}
+
 .faa-falling.animated,
 .faa-falling.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-falling {
@@ -142,8 +205,38 @@
           animation: falling 3s linear infinite;
 }
 
+.faa-falling.faa-reverse.animated,
+.faa-falling.faa-reverse.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-falling.faa-reverse,
+.faa-rising.animated,
+.faa-rising.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-rising {
+  -webkit-animation: falling-reverse 2s linear infinite;
+          animation: falling-reverse 2s linear infinite;
+}
+
+.faa-falling.faa-reverse.animated.faa-fast,
+.faa-falling.faa-reverse.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-falling.faa-reverse.faa-fast,
+.faa-rising.animated.faa-fast,
+.faa-rising.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-rising.faa-fast {
+  -webkit-animation: falling-reverse 1s linear infinite;
+          animation: falling-reverse 1s linear infinite;
+}
+
+.faa-falling.faa-reverse.animated.faa-slow,
+.faa-falling.faa-reverse.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-falling.faa-reverse.faa-slow,
+.faa-rising.animated.faa-slow,
+.faa-rising.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-rising.faa-slow {
+  -webkit-animation: falling-reverse 3s linear infinite;
+          animation: falling-reverse 3s linear infinite;
+}
+
 @-webkit-keyframes flash {
-  0%, 100%, 50% {
+  0%, 50%, 100% {
     opacity: 1;
   }
   25%, 75% {
@@ -152,7 +245,7 @@
 }
 
 @keyframes flash {
-  0%, 100%, 50% {
+  0%, 50%, 100% {
     opacity: 1;
   }
   25%, 75% {
@@ -182,27 +275,21 @@
 }
 
 @-webkit-keyframes float {
-  0% {
+  0%, 100% {
     transform: translateY(0);
   }
   50% {
     transform: translateY(-6px);
   }
-  100% {
-    transform: translateY(0);
-  }
 }
 
 @keyframes float {
-  0% {
+  0%, 100% {
     transform: translateY(0);
   }
   50% {
     transform: translateY(-6px);
   }
-  100% {
-    transform: translateY(0);
-  }
 }
 
 .faa-float.animated,
@@ -227,50 +314,38 @@
 }
 
 @-webkit-keyframes horizontal {
-  0% {
+  0%, 12%, 24%, 36%, 100% {
     transform: translate(0, 0);
   }
-  6% {
+  6%, 18%, 30% {
     transform: translate(5px, 0);
   }
-  12% {
-    transform: translate(0, 0);
-  }
-  18% {
-    transform: translate(5px, 0);
-  }
-  24% {
-    transform: translate(0, 0);
-  }
-  30% {
-    transform: translate(5px, 0);
-  }
-  36%, 100% {
-    transform: translate(0, 0);
-  }
 }
 
 @keyframes horizontal {
-  0% {
+  0%, 12%, 24%, 36%, 100% {
     transform: translate(0, 0);
   }
-  6% {
+  6%, 18%, 30% {
     transform: translate(5px, 0);
   }
-  12% {
+}
+
+@-webkit-keyframes horizontal-reverse {
+  0%, 12%, 24%, 36%, 100% {
     transform: translate(0, 0);
   }
-  18% {
+  6%, 18%, 30% {
-    transform: translate(5px, 0);
+    transform: translate(-5px, 0);
   }
-  24% {
+}
+
+@keyframes horizontal-reverse {
+  0%, 12%, 24%, 36%, 100% {
     transform: translate(0, 0);
   }
-  30% {
+  6%, 18%, 30% {
-    transform: translate(5px, 0);
+    transform: translate(-5px, 0);
-  }
-  36%, 100% {
-    transform: translate(0, 0);
   }
 }
 
@@ -295,55 +370,25 @@
           animation: horizontal 3s ease infinite;
 }
 
-@-webkit-keyframes passing-reverse {
+.faa-horizontal.faa-reverse.animated,
-  0% {
+.faa-horizontal.faa-reverse.animated-hover:hover,
-    transform: translateX(50%);
+.faa-parent.animated-hover:hover > .faa-horizontal.faa-reverse {
-    opacity: 0;
+  -webkit-animation: horizontal-reverse 2s ease infinite;
-  }
+          animation: horizontal-reverse 2s ease infinite;
-  50% {
-    transform: translateX(0%);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(-50%);
-    opacity: 0;
-  }
 }
 
-@keyframes passing-reverse {
+.faa-horizontal.faa-reverse.animated.faa-fast,
-  0% {
+.faa-horizontal.faa-reverse.animated-hover.faa-fast:hover,
-    transform: translateX(50%);
+.faa-parent.animated-hover:hover > .faa-horizontal.faa-reverse.faa-fast {
-    opacity: 0;
+  -webkit-animation: horizontal-reverse 1s ease infinite;
-  }
+          animation: horizontal-reverse 1s ease infinite;
-  50% {
-    transform: translateX(0%);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(-50%);
-    opacity: 0;
-  }
 }
 
-.faa-passing-reverse.animated,
+.faa-horizontal.faa-reverse.animated.faa-slow,
-.faa-passing-reverse.animated-hover:hover,
+.faa-horizontal.faa-reverse.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-passing-reverse {
+.faa-parent.animated-hover:hover > .faa-horizontal.faa-reverse.faa-slow {
-  -webkit-animation: passing-reverse 2s linear infinite;
+  -webkit-animation: horizontal-reverse 3s ease infinite;
-          animation: passing-reverse 2s linear infinite;
+          animation: horizontal-reverse 3s ease infinite;
-}
-
-.faa-passing-reverse.animated.faa-fast,
-.faa-passing-reverse.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-fast {
-  -webkit-animation: passing-reverse 1s linear infinite;
-          animation: passing-reverse 1s linear infinite;
-}
-
-.faa-passing-reverse.animated.faa-slow,
-.faa-passing-reverse.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-slow {
-  -webkit-animation: passing-reverse 3s linear infinite;
-          animation: passing-reverse 3s linear infinite;
 }
 
 @-webkit-keyframes passing {
@@ -376,6 +421,36 @@
   }
 }
 
+@-webkit-keyframes passing-reverse {
+  0% {
+    transform: translateX(50%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-50%);
+    opacity: 0;
+  }
+}
+
+@keyframes passing-reverse {
+  0% {
+    transform: translateX(50%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-50%);
+    opacity: 0;
+  }
+}
+
 .faa-passing.animated,
 .faa-passing.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-passing {
@@ -397,28 +472,43 @@
           animation: passing 3s linear infinite;
 }
 
+.faa-passing.faa-reverse.animated,
+.faa-passing.faa-reverse.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-passing.faa-reverse {
+  -webkit-animation: passing-reverse 2s linear infinite;
+          animation: passing-reverse 2s linear infinite;
+}
+
+.faa-passing.faa-reverse.animated.faa-fast,
+.faa-passing.faa-reverse.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-passing.reverse.faa-fast {
+  -webkit-animation: passing-reverse 1s linear infinite;
+          animation: passing-reverse 1s linear infinite;
+}
+
+.faa-passing.faa-reverse.animated.faa-slow,
+.faa-passing.faa-reverse.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-passing.faa-reverse.faa-slow {
+  -webkit-animation: passing-reverse 3s linear infinite;
+          animation: passing-reverse 3s linear infinite;
+}
+
 @-webkit-keyframes pulse {
-  0% {
+  0%, 100% {
     transform: scale(1.1);
   }
   50% {
     transform: scale(0.8);
   }
-  100% {
-    transform: scale(1.1);
-  }
 }
 
 @keyframes pulse {
-  0% {
+  0%, 100% {
     transform: scale(1.1);
   }
   50% {
     transform: scale(0.8);
   }
-  100% {
-    transform: scale(1.1);
-  }
 }
 
 .faa-pulse.animated,
@@ -449,10 +539,10 @@
   2% {
     transform: rotate(15deg);
   }
-  4% {
+  4%, 12% {
     transform: rotate(-18deg);
   }
-  6% {
+  6%, 14% {
     transform: rotate(18deg);
   }
   8% {
@@ -461,12 +551,6 @@
   10% {
     transform: rotate(22deg);
   }
-  12% {
-    transform: rotate(-18deg);
-  }
-  14% {
-    transform: rotate(18deg);
-  }
   16% {
     transform: rotate(-12deg);
   }
@@ -485,10 +569,10 @@
   2% {
     transform: rotate(15deg);
   }
-  4% {
+  4%, 12% {
     transform: rotate(-18deg);
   }
-  6% {
+  6%, 14% {
     transform: rotate(18deg);
   }
   8% {
@@ -497,12 +581,6 @@
   10% {
     transform: rotate(22deg);
   }
-  12% {
-    transform: rotate(-18deg);
-  }
-  14% {
-    transform: rotate(18deg);
-  }
   16% {
     transform: rotate(-12deg);
   }
@@ -538,57 +616,6 @@
           animation: ring 3s ease infinite;
 }
 
-@-webkit-keyframes rising {
-  0% {
-    transform: translateY(50%);
-    opacity: 0;
-  }
-  50% {
-    transform: translateY(0%);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(-50%);
-    opacity: 0;
-  }
-}
-
-@keyframes rising {
-  0% {
-    transform: translateY(50%);
-    opacity: 0;
-  }
-  50% {
-    transform: translateY(0%);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(-50%);
-    opacity: 0;
-  }
-}
-
-.faa-rising.animated,
-.faa-rising.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-rising {
-  -webkit-animation: rising 2s linear infinite;
-          animation: rising 2s linear infinite;
-}
-
-.faa-rising.animated.faa-fast,
-.faa-rising.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-rising.faa-fast {
-  -webkit-animation: rising 1s linear infinite;
-          animation: rising 1s linear infinite;
-}
-
-.faa-rising.animated.faa-slow,
-.faa-rising.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-rising.faa-slow {
-  -webkit-animation: rising 3s linear infinite;
-          animation: rising 3s linear infinite;
-}
-
 .faa-shake.animated,
 .faa-shake.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-shake {
@@ -599,15 +626,15 @@
 .faa-shake.animated.faa-fast,
 .faa-shake.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-shake.faa-fast {
-  -webkit-animation: wrench 1.2s ease infinite;
+  -webkit-animation: wrench 1.25s ease infinite;
-          animation: wrench 1.2s ease infinite;
+          animation: wrench 1.25s ease infinite;
 }
 
 .faa-shake.animated.faa-slow,
 .faa-shake.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-shake.faa-slow {
-  -webkit-animation: wrench 3.7s ease infinite;
+  -webkit-animation: wrench 3.75s ease infinite;
-          animation: wrench 3.7s ease infinite;
+          animation: wrench 3.75s ease infinite;
 }
 
 @-webkit-keyframes spin {
@@ -628,6 +655,24 @@
   }
 }
 
+@-webkit-keyframes spin-reverse {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-359deg);
+  }
+}
+
+@keyframes spin-reverse {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-359deg);
+  }
+}
+
 .faa-spin.animated,
 .faa-spin.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-spin {
@@ -638,15 +683,36 @@
 .faa-spin.animated.faa-fast,
 .faa-spin.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-spin.faa-fast {
-  -webkit-animation: spin 0.7s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-          animation: spin 0.7s linear infinite;
+          animation: spin 0.75s linear infinite;
 }
 
 .faa-spin.animated.faa-slow,
 .faa-spin.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-spin.faa-slow {
-  -webkit-animation: spin 2.2s linear infinite;
+  -webkit-animation: spin 2.25s linear infinite;
-          animation: spin 2.2s linear infinite;
+          animation: spin 2.25s linear infinite;
+}
+
+.faa-spin.faa-reverse.animated,
+.faa-spin.faa-reverse.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-spin.faa-reverse {
+  -webkit-animation: spin-reverse 1.5s linear infinite;
+          animation: spin-reverse 1.5s linear infinite;
+}
+
+.faa-spin.faa-reverse.animated.faa-fast,
+.faa-spin.faa-reverse.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-spin.faa-reverse.faa-fast {
+  -webkit-animation: spin-reverse 0.75s linear infinite;
+          animation: spin-reverse 0.75s linear infinite;
+}
+
+.faa-spin.faa-reverse.animated.faa-slow,
+.faa-spin.faa-reverse.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-spin.faa-reverse.faa-slow {
+  -webkit-animation: spin-reverse 2.25s linear infinite;
+          animation: spin-reverse 2.25s linear infinite;
 }
 
 @-webkit-keyframes tada {
@@ -707,22 +773,10 @@
 }
 
 @-webkit-keyframes vertical {
-  0% {
+  0%, 8%, 16% {
     transform: translate(0, -3px);
   }
-  4% {
+  4%, 12%, 20% {
-    transform: translate(0, 3px);
-  }
-  8% {
-    transform: translate(0, -3px);
-  }
-  12% {
-    transform: translate(0, 3px);
-  }
-  16% {
-    transform: translate(0, -3px);
-  }
-  20% {
     transform: translate(0, 3px);
   }
   22%, 100% {
@@ -731,22 +785,10 @@
 }
 
 @keyframes vertical {
-  0% {
+  0%, 8%, 16% {
     transform: translate(0, -3px);
   }
-  4% {
+  4%, 12%, 20% {
-    transform: translate(0, 3px);
-  }
-  8% {
-    transform: translate(0, -3px);
-  }
-  12% {
-    transform: translate(0, 3px);
-  }
-  16% {
-    transform: translate(0, -3px);
-  }
-  20% {
     transform: translate(0, 3px);
   }
   22%, 100% {
@@ -771,8 +813,8 @@
 .faa-vertical.animated.faa-slow,
 .faa-vertical.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-vertical.faa-slow {
-  -webkit-animation: vertical 4s ease infinite;
+  -webkit-animation: vertical 3s ease infinite;
-          animation: vertical 4s ease infinite;
+          animation: vertical 3s ease infinite;
 }
 
 @-webkit-keyframes wrench {
@@ -782,42 +824,12 @@
   8% {
     transform: rotate(12deg);
   }
-  10% {
+  10%, 28%, 30%, 48%, 50%, 68% {
     transform: rotate(24deg);
   }
-  18% {
+  18%, 20%, 38%, 40%, 58%, 60% {
     transform: rotate(-24deg);
   }
-  20% {
-    transform: rotate(-24deg);
-  }
-  28% {
-    transform: rotate(24deg);
-  }
-  30% {
-    transform: rotate(24deg);
-  }
-  38% {
-    transform: rotate(-24deg);
-  }
-  40% {
-    transform: rotate(-24deg);
-  }
-  48% {
-    transform: rotate(24deg);
-  }
-  50% {
-    transform: rotate(24deg);
-  }
-  58% {
-    transform: rotate(-24deg);
-  }
-  60% {
-    transform: rotate(-24deg);
-  }
-  68% {
-    transform: rotate(24deg);
-  }
   75%, 100% {
     transform: rotate(0deg);
   }
@@ -830,42 +842,12 @@
   8% {
     transform: rotate(12deg);
   }
-  10% {
+  10%, 28%, 30%, 48%, 50%, 68% {
     transform: rotate(24deg);
   }
-  18% {
+  18%, 20%, 38%, 40%, 58%, 60% {
     transform: rotate(-24deg);
   }
-  20% {
-    transform: rotate(-24deg);
-  }
-  28% {
-    transform: rotate(24deg);
-  }
-  30% {
-    transform: rotate(24deg);
-  }
-  38% {
-    transform: rotate(-24deg);
-  }
-  40% {
-    transform: rotate(-24deg);
-  }
-  48% {
-    transform: rotate(24deg);
-  }
-  50% {
-    transform: rotate(24deg);
-  }
-  58% {
-    transform: rotate(-24deg);
-  }
-  60% {
-    transform: rotate(-24deg);
-  }
-  68% {
-    transform: rotate(24deg);
-  }
   75%, 100% {
     transform: rotate(0deg);
   }
@@ -884,14 +866,14 @@
 .faa-wrench.animated.faa-fast,
 .faa-wrench.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-wrench.faa-fast {
-  -webkit-animation: wrench 1.2s ease infinite;
+  -webkit-animation: wrench 1.25s ease infinite;
-          animation: wrench 1.2s ease infinite;
+          animation: wrench 1.25s ease infinite;
 }
 
 .faa-wrench.animated.faa-slow,
 .faa-wrench.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-wrench.faa-slow {
-  -webkit-animation: wrench 3.7s ease infinite;
+  -webkit-animation: wrench 3.75s ease infinite;
-          animation: wrench 3.7s ease infinite;
+          animation: wrench 3.75s ease infinite;
 }
 /*# sourceMappingURL=font-awesome-animation.css.map */

font-awesome-animation.scss

@@ -1,14 +1,13 @@
+@import 'scss/_speed';
 @import 'scss/bounce';
 @import 'scss/burst';
 @import 'scss/falling';
 @import 'scss/flash';
 @import 'scss/float';
 @import 'scss/horizontal';
-@import 'scss/passing-reverse';
 @import 'scss/passing';
 @import 'scss/pulse';
 @import 'scss/ring';
-@import 'scss/rising';
 @import 'scss/shake';
 @import 'scss/spin';
 @import 'scss/tada';

scss/_speed.scss

@@ -0,0 +1,2 @@
+$faa-speed-coeff-fast: 0.5;
+$faa-speed-coeff-slow: 1.5;

scss/bounce.scss

@@ -1,26 +1,47 @@
+$faa-bounce-speed: 2s;
 @keyframes bounce {
-  0%,10%,20%,50%,80%,100% {
+  0%, 10%, 20%, 50%, 80%, 100% {
-    transform:translateY(0);
+    transform: translateY(0);
   }
-  40% {
+  40%, 60% {
-    transform:translateY(-15px);
+    transform: translateY(-15px);
   }
-  60% {
+}
-    transform:translateY(-15px);
+@keyframes bounce-reverse {
+  0%, 10%, 20%, 50%, 80%, 100% {
+    transform: translateY(0);
+  }
+  40%, 60% {
+    transform: translateY(15px);
   }
 }
 .faa-bounce.animated,
 .faa-bounce.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-bounce {
-  animation: bounce 2s ease infinite;
+  animation: bounce $faa-bounce-speed ease infinite;
 }
 .faa-bounce.animated.faa-fast,
 .faa-bounce.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-bounce.faa-fast {
-  animation: bounce 1s ease infinite;
+  animation: bounce ($faa-bounce-speed * $faa-speed-coeff-fast) ease infinite;
 }
 .faa-bounce.animated.faa-slow,
 .faa-bounce.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-bounce.faa-slow {
-  animation: bounce 3s ease infinite;
+  animation: bounce ($faa-bounce-speed * $faa-speed-coeff-slow) ease infinite;
+}
+.faa-bounce.faa-reverse.animated,
+.faa-bounce.faa-reverse.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-bounce.faa-reverse {
+  animation: bounce-reverse $faa-bounce-speed ease infinite;
+}
+.faa-bounce.faa-reverse.animated.faa-fast,
+.faa-bounce.faa-reverse.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-bounce.faa-reverse.faa-fast {
+  animation: bounce-reverse ($faa-bounce-speed * $faa-speed-coeff-fast) ease infinite;
+}
+.faa-bounce.faa-reverse.animated.faa-slow,
+.faa-bounce.faa-reverse.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-bounce.faa-reverse.faa-slow {
+  animation: bounce-reverse ($faa-bounce-speed * $faa-speed-coeff-slow) ease infinite;
 }

scss/burst.scss

@@ -1,3 +1,4 @@
+$faa-burst-speed: 2s;
 @keyframes burst {
   0% {
     opacity:.6;
@@ -13,15 +14,15 @@
 .faa-burst.animated,
 .faa-burst.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-burst {
-  animation: burst 2s infinite linear;
+  animation: burst $faa-burst-speed infinite linear;
 }
 .faa-burst.animated.faa-fast,
 .faa-burst.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-burst.faa-fast {
-  animation: burst 1s infinite linear;
+  animation: burst ($faa-burst-speed * $faa-speed-coeff-fast) infinite linear;
 }
 .faa-burst.animated.faa-slow,
 .faa-burst.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-burst.faa-slow {
-  animation: burst 3s infinite linear;
+  animation: burst ($faa-burst-speed * $faa-speed-coeff-slow) infinite linear;
 }

scss/falling.scss

@@ -1,3 +1,4 @@
+$faa-falling-speed: 2s;
 @keyframes falling {
   0% {
     transform:translateY(-50%);
@@ -12,18 +13,56 @@
     opacity:0;
   }
 }
+@keyframes falling-reverse {
+  0% {
+    transform:translateY(50%);
+    opacity:0;
+  }
+  50% {
+    transform:translateY(0%);
+    opacity:1;
+  }
+  100% {
+    transform:translateY(-50%);
+    opacity:0;
+  }
+}
 .faa-falling.animated,
 .faa-falling.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-falling {
-  animation: falling 2s linear infinite;
+  animation: falling $faa-falling-speed linear infinite;
 }
 .faa-falling.animated.faa-fast,
 .faa-falling.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-falling.faa-fast {
-  animation: falling 1s linear infinite;
+  animation: falling ($faa-falling-speed * $faa-speed-coeff-fast) linear infinite;
 }
 .faa-falling.animated.faa-slow,
 .faa-falling.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-falling.faa-slow {
-  animation: falling 3s linear infinite;
+  animation: falling ($faa-falling-speed * $faa-speed-coeff-slow) linear infinite;
+}
+.faa-falling.faa-reverse.animated,
+.faa-falling.faa-reverse.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-falling.faa-reverse,
+.faa-rising.animated,
+.faa-rising.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-rising {
+  animation: falling-reverse $faa-falling-speed linear infinite;
+}
+.faa-falling.faa-reverse.animated.faa-fast,
+.faa-falling.faa-reverse.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-falling.faa-reverse.faa-fast,
+.faa-rising.animated.faa-fast,
+.faa-rising.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-rising.faa-fast {
+  animation: falling-reverse ($faa-falling-speed * $faa-speed-coeff-fast) linear infinite;
+}
+.faa-falling.faa-reverse.animated.faa-slow,
+.faa-falling.faa-reverse.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-falling.faa-reverse.faa-slow,
+.faa-rising.animated.faa-slow,
+.faa-rising.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-rising.faa-slow {
+  animation: falling-reverse ($faa-falling-speed * $faa-speed-coeff-slow) linear infinite;
 }

scss/flash.scss

@@ -1,24 +1,24 @@
+$faa-flash-speed: 2s;
 @keyframes flash {
-  0%,100%,50% {
+  0%, 50%, 100% {
-    opacity:1;
+    opacity: 1;
   }
-  25%,75%
+  25%, 75% {
-  {
+    opacity: 0;
-    opacity:0;
   }
 }
 .faa-flash.animated,
 .faa-flash.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-flash {
-  animation: flash 2s ease infinite;
+  animation: flash $faa-flash-speed ease infinite;
 }
 .faa-flash.animated.faa-fast,
 .faa-flash.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-flash.faa-fast {
-  animation: flash 1s ease infinite;
+  animation: flash ($faa-flash-speed * $faa-speed-coeff-fast) ease infinite;
 }
 .faa-flash.animated.faa-slow,
 .faa-flash.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-flash.faa-slow {
-  animation: flash 3s ease infinite;
+  animation: flash ($faa-flash-speed * $faa-speed-coeff-slow) ease infinite;
 }

scss/float.scss

@@ -1,26 +1,24 @@
+$faa-float-speed: 2s;
 @keyframes float{
-  0% {
+  0%, 100% {
     transform: translateY(0);
   }
   50% {
     transform: translateY(-6px);
   }
-  100% {
-    transform: translateY(0);
-  }
 }
 .faa-float.animated,
 .faa-float.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-float {
-  animation: float 2s linear infinite;
+  animation: float $faa-float-speed linear infinite;
 }
 .faa-float.animated.faa-fast,
 .faa-float.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-float.faa-fast {
-  animation: float 1s linear infinite;
+  animation: float ($faa-float-speed * $faa-speed-coeff-fast) linear infinite;
 }
 .faa-float.animated.faa-slow,
 .faa-float.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-float.faa-slow {
-  animation: float 3s linear infinite;
+  animation: float ($faa-float-speed * $faa-speed-coeff-slow) linear infinite;
 }

scss/horizontal.scss

@@ -1,38 +1,47 @@
+$faa-horizontal-speed: 2s;
 @keyframes horizontal {
-  0% {
+  0%, 12%, 24%, 36%, 100% {
-    transform:translate(0,0);
+    transform: translate(0,0);
   }
-  6% {
+  6%, 18%, 30% {
-    transform:translate(5px,0);
+    transform: translate(5px,0);
   }
-  12% {
+}
-    transform:translate(0,0);
+@keyframes horizontal-reverse {
+  0%, 12%, 24%, 36%, 100% {
+    transform: translate(0,0);
   }
-  18% {
+  6%, 18%, 30% {
-    transform:translate(5px,0);
+    transform: translate(-5px,0);
-  }
-  24% {
-    transform:translate(0,0);
-  }
-  30% {
-    transform:translate(5px,0);
-  }
-  36%,100% {
-    transform:translate(0,0);
   }
 }
 .faa-horizontal.animated,
 .faa-horizontal.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-horizontal {
-  animation: horizontal 2s ease infinite;
+  animation: horizontal $faa-horizontal-speed ease infinite;
 }
 .faa-horizontal.animated.faa-fast,
 .faa-horizontal.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-horizontal.faa-fast {
-  animation: horizontal 1s ease infinite;
+  animation: horizontal ($faa-horizontal-speed * $faa-speed-coeff-fast) ease infinite;
 }
 .faa-horizontal.animated.faa-slow,
 .faa-horizontal.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-horizontal.faa-slow {
-  animation: horizontal 3s ease infinite;
+  animation: horizontal ($faa-horizontal-speed * $faa-speed-coeff-slow) ease infinite;
+}
+.faa-horizontal.faa-reverse.animated,
+.faa-horizontal.faa-reverse.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-horizontal.faa-reverse {
+  animation: horizontal-reverse $faa-horizontal-speed ease infinite;
+}
+.faa-horizontal.faa-reverse.animated.faa-fast,
+.faa-horizontal.faa-reverse.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-horizontal.faa-reverse.faa-fast {
+  animation: horizontal-reverse ($faa-horizontal-speed * $faa-speed-coeff-fast) ease infinite;
+}
+.faa-horizontal.faa-reverse.animated.faa-slow,
+.faa-horizontal.faa-reverse.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-horizontal.faa-reverse.faa-slow {
+  animation: horizontal-reverse ($faa-horizontal-speed * $faa-speed-coeff-slow) ease infinite;
 }

scss/passing-reverse.scss

@@ -1,29 +0,0 @@
-@keyframes passing-reverse {
-  0% {
-    transform:translateX(50%);
-    opacity:0;
-  }
-  50% {
-    transform:translateX(0%);
-    opacity:1;
-  }
-  100% {
-    transform:translateX(-50%);
-    opacity:0;
-  }
-}
-.faa-passing-reverse.animated,
-.faa-passing-reverse.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-passing-reverse {
-  animation: passing-reverse 2s linear infinite;
-}
-.faa-passing-reverse.animated.faa-fast,
-.faa-passing-reverse.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-fast {
-  animation: passing-reverse 1s linear infinite;
-}
-.faa-passing-reverse.animated.faa-slow,
-.faa-passing-reverse.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-slow {
-  animation: passing-reverse 3s linear infinite;
-}

scss/passing.scss

@@ -1,29 +1,59 @@
+$faa-passing-speed: 2s;
 @keyframes passing {
   0% {
-    transform:translateX(-50%);
+    transform: translateX(-50%);
-    opacity:0;
+    opacity: 0;
   }
   50% {
-    transform:translateX(0%);
+    transform: translateX(0%);
-    opacity:1;
+    opacity: 1;
   }
   100% {
-    transform:translateX(50%);
+    transform: translateX(50%);
-    opacity:0;
+    opacity: 0;
+  }
+}
+@keyframes passing-reverse {
+  0% {
+    transform: translateX(50%);
+    opacity: 0;
+  }
+  50% {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(-50%);
+    opacity: 0;
   }
 }
 .faa-passing.animated,
 .faa-passing.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-passing {
-  animation: passing 2s linear infinite;
+  animation: passing $faa-passing-speed linear infinite;
 }
 .faa-passing.animated.faa-fast,
 .faa-passing.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-passing.faa-fast {
-  animation: passing 1s linear infinite;
+  animation: passing ($faa-passing-speed * $faa-speed-coeff-fast) linear infinite;
 }
 .faa-passing.animated.faa-slow,
 .faa-passing.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-passing.faa-slow {
-  animation: passing 3s linear infinite;
+  animation: passing ($faa-passing-speed * $faa-speed-coeff-slow) linear infinite;
+}
+.faa-passing.faa-reverse.animated,
+.faa-passing.faa-reverse.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-passing.faa-reverse {
+  animation: passing-reverse $faa-passing-speed linear infinite;
+}
+.faa-passing.faa-reverse.animated.faa-fast,
+.faa-passing.faa-reverse.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-passing.reverse.faa-fast {
+  animation: passing-reverse ($faa-passing-speed * $faa-speed-coeff-fast) linear infinite;
+}
+.faa-passing.faa-reverse.animated.faa-slow,
+.faa-passing.faa-reverse.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-passing.faa-reverse.faa-slow {
+  animation: passing-reverse ($faa-passing-speed * $faa-speed-coeff-slow) linear infinite;
 }

scss/pulse.scss

@@ -1,26 +1,24 @@
+$faa-pulse-speed: 2s;
 @keyframes pulse {
-  0% {
+  0%, 100% {
     transform: scale(1.1);
   }
   50% {
     transform: scale(0.8);
   }
-  100% {
-    transform: scale(1.1);
-  }
 }
 .faa-pulse.animated,
 .faa-pulse.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-pulse {
-  animation: pulse 2s linear infinite;
+  animation: pulse $faa-pulse-speed linear infinite;
 }
 .faa-pulse.animated.faa-fast,
 .faa-pulse.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-pulse.faa-fast {
-  animation: pulse 1s linear infinite;
+  animation: pulse ($faa-pulse-speed * $faa-speed-coeff-fast) linear infinite;
 }
 .faa-pulse.animated.faa-slow,
 .faa-pulse.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-pulse.faa-slow {
-  animation: pulse 3s linear infinite;
+  animation: pulse ($faa-pulse-speed * $faa-speed-coeff-slow) linear infinite;
 }

scss/ring.scss

@@ -1,42 +1,37 @@
+$faa-ring-speed: 2s;
 @keyframes ring {
   0% {
-    transform:rotate(-15deg);
+    transform: rotate(-15deg);
   }
   2% {
-    transform:rotate(15deg);
+    transform: rotate(15deg);
   }
-  4% {
+  4%, 12% {
-    transform:rotate(-18deg);
+    transform: rotate(-18deg);
   }
-  6% {
+  6%, 14% {
-    transform:rotate(18deg);
+    transform: rotate(18deg);
   }
   8% {
-    transform:rotate(-22deg);
+    transform: rotate(-22deg);
   }
   10% {
-    transform:rotate(22deg);
+    transform: rotate(22deg);
-  }
-  12% {
-    transform:rotate(-18deg);
-  }
-  14% {
-    transform:rotate(18deg);
   }
   16% {
-    transform:rotate(-12deg);
+    transform: rotate(-12deg);
   }
   18% {
-    transform:rotate(12deg);
+    transform: rotate(12deg);
   }
-  20%,100% {
+  20%, 100% {
-    transform:rotate(0deg);
+    transform: rotate(0deg);
   }
 }
 .faa-ring.animated,
 .faa-ring.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-ring {
-  animation: ring 2s ease infinite;
+  animation: ring $faa-ring-speed ease infinite;
   transform-origin-x: 50%;
   transform-origin-y: 0px;
   transform-origin-z: initial;
@@ -44,10 +39,10 @@
 .faa-ring.animated.faa-fast,
 .faa-ring.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-ring.faa-fast {
-  animation: ring 1s ease infinite;
+  animation: ring ($faa-ring-speed * $faa-speed-coeff-fast) ease infinite;
 }
 .faa-ring.animated.faa-slow,
 .faa-ring.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-ring.faa-slow {
-  animation: ring 3s ease infinite;
+  animation: ring ($faa-ring-speed * $faa-speed-coeff-slow) ease infinite;
 }

scss/rising.scss

@@ -1,29 +0,0 @@
-@keyframes rising {
-  0% {
-    transform:translateY(50%);
-    opacity:0;
-  }
-  50% {
-    transform:translateY(0%);
-    opacity:1;
-  }
-  100% {
-    transform:translateY(-50%);
-    opacity:0;
-  }
-}
-.faa-rising.animated,
-.faa-rising.animated-hover:hover,
-.faa-parent.animated-hover:hover > .faa-rising {
-  animation: rising 2s linear infinite;
-}
-.faa-rising.animated.faa-fast,
-.faa-rising.animated-hover.faa-fast:hover,
-.faa-parent.animated-hover:hover > .faa-rising.faa-fast {
-  animation: rising 1s linear infinite;
-}
-.faa-rising.animated.faa-slow,
-.faa-rising.animated-hover.faa-slow:hover,
-.faa-parent.animated-hover:hover > .faa-rising.faa-slow {
-  animation: rising 3s linear infinite;
-}

scss/shake.scss

@@ -1,15 +1,16 @@
+$faa-shake-speed: 2.5s;
 .faa-shake.animated,
 .faa-shake.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-shake {
-  animation: wrench 2.5s ease infinite;
+  animation: wrench $faa-shake-speed ease infinite;
 }
 .faa-shake.animated.faa-fast,
 .faa-shake.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-shake.faa-fast {
-  animation: wrench 1.2s ease infinite;
+  animation: wrench ($faa-shake-speed * $faa-speed-coeff-fast) ease infinite;
 }
 .faa-shake.animated.faa-slow,
 .faa-shake.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-shake.faa-slow {
-  animation: wrench 3.7s ease infinite;
+  animation: wrench ($faa-shake-speed * $faa-speed-coeff-slow) ease infinite;
 }

scss/spin.scss

@@ -1,23 +1,47 @@
-@keyframes spin{
+$faa-spin-speed: 1.5s;
+@keyframes spin {
   0% {
-    transform:rotate(0deg);
+    transform: rotate(0deg);
   }
   100% {
-    transform:rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes spin-reverse {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-359deg);
   }
 }
 .faa-spin.animated,
 .faa-spin.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-spin {
-  animation: spin 1.5s linear infinite;
+  animation: spin $faa-spin-speed linear infinite;
 }
 .faa-spin.animated.faa-fast,
 .faa-spin.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-spin.faa-fast {
-  animation: spin 0.7s linear infinite;
+  animation: spin ($faa-spin-speed * $faa-speed-coeff-fast) linear infinite;
 }
 .faa-spin.animated.faa-slow,
 .faa-spin.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-spin.faa-slow {
-  animation: spin 2.2s linear infinite;
+  animation: spin ($faa-spin-speed * $faa-speed-coeff-slow) linear infinite;
+}
+.faa-spin.faa-reverse.animated,
+.faa-spin.faa-reverse.animated-hover:hover,
+.faa-parent.animated-hover:hover > .faa-spin.faa-reverse {
+  animation: spin-reverse $faa-spin-speed linear infinite;
+}
+.faa-spin.faa-reverse.animated.faa-fast,
+.faa-spin.faa-reverse.animated-hover.faa-fast:hover,
+.faa-parent.animated-hover:hover > .faa-spin.faa-reverse.faa-fast {
+  animation: spin-reverse ($faa-spin-speed * $faa-speed-coeff-fast) linear infinite;
+}
+.faa-spin.faa-reverse.animated.faa-slow,
+.faa-spin.faa-reverse.animated-hover.faa-slow:hover,
+.faa-parent.animated-hover:hover > .faa-spin.faa-reverse.faa-slow {
+  animation: spin-reverse ($faa-spin-speed * $faa-speed-coeff-slow) linear infinite;
 }

scss/tada.scss

@@ -1,32 +1,33 @@
+$faa-tada-speed: 2s;
 @keyframes tada {
-  0%  {
+  0% {
     transform: scale(1);
   }
-  10%,20%  {
+  10%, 20%  {
-    transform:scale(.9) rotate(-8deg);;
+    transform: scale(.9) rotate(-8deg);;
   }
-  30%,50%,70%  {
+  30%, 50%, 70%  {
-    transform:scale(1.3) rotate(8deg);
+    transform: scale(1.3) rotate(8deg);
   }
-  40%,60%  {
+  40%, 60%  {
-    transform:scale(1.3) rotate(-8deg);
+    transform: scale(1.3) rotate(-8deg);
   }
-  80%,100%  {
+  80%, 100%  {
-    transform:scale(1) rotate(0);
+    transform: scale(1) rotate(0);
   }
 }
 .faa-tada.animated,
 .faa-tada.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-tada {
-  animation: tada 2s linear infinite;
+  animation: tada $faa-tada-speed linear infinite;
 }
 .faa-tada.animated.faa-fast,
 .faa-tada.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-tada.faa-fast {
-  animation: tada 1s linear infinite;
+  animation: tada ($faa-tada-speed * $faa-speed-coeff-fast) linear infinite;
 }
 .faa-tada.animated.faa-slow,
 .faa-tada.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-tada.faa-slow {
-  animation: tada 3s linear infinite;
+  animation: tada ($faa-tada-speed * $faa-speed-coeff-slow) linear infinite;
 }

scss/vertical.scss

@@ -1,38 +1,27 @@
+$faa-vertical-speed: 2s;
 @keyframes vertical {
-  0% {
+  0%, 8%, 16% {
-    transform:translate(0,-3px);
+    transform: translate(0,-3px);
   }
-  4% {
+  4%, 12%, 20% {
-    transform:translate(0,3px);
+    transform: translate(0,3px);
   }
-  8% {
+  22%, 100% {
-    transform:translate(0,-3px);
+    transform: translate(0,0);
-  }
-  12% {
-    transform:translate(0,3px);
-  }
-  16% {
-    transform:translate(0,-3px);
-  }
-  20% {
-    transform:translate(0,3px);
-  }
-  22%,100% {
-    transform:translate(0,0);
   }
 }
 .faa-vertical.animated,
 .faa-vertical.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-vertical {
-  animation: vertical 2s ease infinite;
+  animation: vertical $faa-vertical-speed ease infinite;
 }
 .faa-vertical.animated.faa-fast,
 .faa-vertical.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-vertical.faa-fast {
-  animation: vertical 1s ease infinite;
+  animation: vertical ($faa-vertical-speed * $faa-speed-coeff-fast) ease infinite;
 }
 .faa-vertical.animated.faa-slow,
 .faa-vertical.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-vertical.faa-slow {
-  animation: vertical 4s ease infinite;
+  animation: vertical ($faa-vertical-speed * $faa-speed-coeff-slow) ease infinite;
 }

scss/wrench.scss

@@ -1,54 +1,25 @@
+$faa-wrench-speed: 2.5s;
 @keyframes wrench {
   0% {
-    transform:rotate(-12deg);
+    transform: rotate(-12deg);
   }
   8% {
-    transform:rotate(12deg);
+    transform: rotate(12deg);
   }
-  10% {
+  10%, 28%, 30%, 48%, 50%, 68% {
-    transform:rotate(24deg);
+    transform: rotate(24deg);
   }
-  18% {
+  18%, 20%, 38%, 40%, 58%, 60% {
-    transform:rotate(-24deg);
+    transform: rotate(-24deg);
-  }
-  20% {
-    transform:rotate(-24deg);
-  }
-  28% {
-    transform:rotate(24deg);
-  }
-  30% {
-    transform:rotate(24deg);
-  }
-  38% {
-    transform:rotate(-24deg);
-  }
-  40% {
-    transform:rotate(-24deg);
-  }
-  48% {
-    transform:rotate(24deg);
-  }
-  50% {
-    transform:rotate(24deg);
-  }
-  58% {
-    transform:rotate(-24deg);
-  }
-  60% {
-    transform:rotate(-24deg);
-  }
-  68% {
-    transform:rotate(24deg);
   }
   75%,100% {
-    transform:rotate(0deg);
+    transform: rotate(0deg);
   }
 }
 .faa-wrench.animated,
 .faa-wrench.animated-hover:hover,
 .faa-parent.animated-hover:hover > .faa-wrench {
-  animation: wrench 2.5s ease infinite;
+  animation: wrench $faa-wrench-speed ease infinite;
   transform-origin-x: 90%;
   transform-origin-y: 35%;
   transform-origin-z: initial;
@@ -56,10 +27,10 @@
 .faa-wrench.animated.faa-fast,
 .faa-wrench.animated-hover.faa-fast:hover,
 .faa-parent.animated-hover:hover > .faa-wrench.faa-fast {
-  animation: wrench 1.2s ease infinite;
+  animation: wrench ($faa-wrench-speed * $faa-speed-coeff-fast) ease infinite;
 }
 .faa-wrench.animated.faa-slow,
 .faa-wrench.animated-hover.faa-slow:hover,
 .faa-parent.animated-hover:hover > .faa-wrench.faa-slow {
-  animation: wrench 3.7s ease infinite;
+  animation: wrench ($faa-wrench-speed * $faa-speed-coeff-slow) ease infinite;
 }