font-awesome-animation/scss/horizontal.scss

48 lines
1.7 KiB
SCSS

$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;
}