mirror of
https://github.com/l-lin/font-awesome-animation.git
synced 2024-12-27 05:51:31 +08:00
48 lines
1.7 KiB
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;
|
|
}
|