$faa-horizontal-speed: 2s;
@keyframes horizontal {
  0%, 12%, 24%, 36%, 100% {
    transform: translate(0,0);
  }
  6%, 18%, 30% {
    transform: translate(5px,0);
  }
}
@keyframes horizontal-reverse {
  0%, 12%, 24%, 36%, 100% {
    transform: translate(0,0);
  }
  6%, 18%, 30% {
    transform: translate(-5px,0);
  }
}
.faa-horizontal.animated,
.faa-horizontal.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-horizontal {
  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 ($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 ($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;
}