mirror of
https://github.com/l-lin/font-awesome-animation.git
synced 2024-12-27 14:01:33 +08:00
37 lines
982 B
SCSS
37 lines
982 B
SCSS
$faa-wrench-speed: 2.5s;
|
|
@keyframes wrench {
|
|
0% {
|
|
transform: rotate(-12deg);
|
|
}
|
|
8% {
|
|
transform: rotate(12deg);
|
|
}
|
|
10%, 28%, 30%, 48%, 50%, 68% {
|
|
transform: rotate(24deg);
|
|
}
|
|
18%, 20%, 38%, 40%, 58%, 60% {
|
|
transform: rotate(-24deg);
|
|
}
|
|
75%,100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
.faa-wrench.animated,
|
|
.faa-wrench.animated-hover:hover,
|
|
.faa-parent.animated-hover:hover > .faa-wrench {
|
|
animation: wrench $faa-wrench-speed ease infinite;
|
|
transform-origin-x: 90%;
|
|
transform-origin-y: 35%;
|
|
transform-origin-z: initial;
|
|
}
|
|
.faa-wrench.animated.faa-fast,
|
|
.faa-wrench.animated-hover.faa-fast:hover,
|
|
.faa-parent.animated-hover:hover > .faa-wrench.faa-fast {
|
|
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 ($faa-wrench-speed * $faa-speed-coeff-slow) ease infinite;
|
|
}
|