mirror of
https://github.com/l-lin/font-awesome-animation.git
synced 2024-10-23 06:36:34 +08:00
54 lines
1.0 KiB
SCSS
54 lines
1.0 KiB
SCSS
|
@keyframes ring {
|
||
|
|
0% {
|
||
|
|
transform:rotate(-15deg);
|
||
|
|
}
|
||
|
|
2% {
|
||
|
|
transform:rotate(15deg);
|
||
|
|
}
|
||
|
|
4% {
|
||
|
|
transform:rotate(-18deg);
|
||
|
|
}
|
||
|
|
6% {
|
||
|
|
transform:rotate(18deg);
|
||
|
|
}
|
||
|
|
8% {
|
||
|
|
transform:rotate(-22deg);
|
||
|
|
}
|
||
|
|
10% {
|
||
|
|
transform:rotate(22deg);
|
||
|
|
}
|
||
|
|
12% {
|
||
|
|
transform:rotate(-18deg);
|
||
|
|
}
|
||
|
|
14% {
|
||
|
|
transform:rotate(18deg);
|
||
|
|
}
|
||
|
|
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 2s 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 1s 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 3s ease infinite;
|
||
|
|
}
|