mirror of
https://github.com/l-lin/font-awesome-animation.git
synced 2024-12-27 05:51:31 +08:00
49 lines
1.0 KiB
SCSS
49 lines
1.0 KiB
SCSS
$faa-ring-speed: 2s;
|
|
@keyframes ring {
|
|
0% {
|
|
transform: rotate(-15deg);
|
|
}
|
|
2% {
|
|
transform: rotate(15deg);
|
|
}
|
|
4%, 12% {
|
|
transform: rotate(-18deg);
|
|
}
|
|
6%, 14% {
|
|
transform: rotate(18deg);
|
|
}
|
|
8% {
|
|
transform: rotate(-22deg);
|
|
}
|
|
10% {
|
|
transform: rotate(22deg);
|
|
}
|
|
16% {
|
|
transform: rotate(-12deg);
|
|
}
|
|
18% {
|
|
transform: rotate(12deg);
|
|
}
|
|
20%, 100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
}
|
|
.faa-ring.animated,
|
|
.faa-ring.animated-hover:hover,
|
|
.faa-parent.animated-hover:hover > .faa-ring {
|
|
animation: ring $faa-ring-speed ease infinite;
|
|
transform-origin-x: 50%;
|
|
transform-origin-y: 0px;
|
|
transform-origin-z: initial;
|
|
}
|
|
.faa-ring.animated.faa-fast,
|
|
.faa-ring.animated-hover.faa-fast:hover,
|
|
.faa-parent.animated-hover:hover > .faa-ring.faa-fast {
|
|
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 ($faa-ring-speed * $faa-speed-coeff-slow) ease infinite;
|
|
}
|