mirror of
https://github.com/l-lin/font-awesome-animation.git
synced 2024-12-25 21:11:33 +08:00
feat(#33): add faa-reverse + use SCSS variable for speed
This commit is contained in:
Louis Lin
parent
3a6de4e0d1
commit
82d43d8eef
@ -3,10 +3,7 @@
|
||||
0%, 10%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
60% {
|
||||
40%, 60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
@ -15,11 +12,26 @@
|
||||
0%, 10%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
40%, 60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
|
||||
@-webkit-keyframes bounce-reverse {
|
||||
0%, 10%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40%, 60% {
|
||||
transform: translateY(15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce-reverse {
|
||||
0%, 10%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40%, 60% {
|
||||
transform: translateY(15px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,6 +56,27 @@
|
||||
animation: bounce 3s ease infinite;
|
||||
}
|
||||
|
||||
.faa-bounce.faa-reverse.animated,
|
||||
.faa-bounce.faa-reverse.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-bounce.faa-reverse {
|
||||
-webkit-animation: bounce-reverse 2s ease infinite;
|
||||
animation: bounce-reverse 2s ease infinite;
|
||||
}
|
||||
|
||||
.faa-bounce.faa-reverse.animated.faa-fast,
|
||||
.faa-bounce.faa-reverse.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-bounce.faa-reverse.faa-fast {
|
||||
-webkit-animation: bounce-reverse 1s ease infinite;
|
||||
animation: bounce-reverse 1s ease infinite;
|
||||
}
|
||||
|
||||
.faa-bounce.faa-reverse.animated.faa-slow,
|
||||
.faa-bounce.faa-reverse.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-bounce.faa-reverse.faa-slow {
|
||||
-webkit-animation: bounce-reverse 3s ease infinite;
|
||||
animation: bounce-reverse 3s ease infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes burst {
|
||||
0% {
|
||||
opacity: .6;
|
||||
@ -121,6 +154,36 @@
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes falling-reverse {
|
||||
0% {
|
||||
transform: translateY(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes falling-reverse {
|
||||
0% {
|
||||
transform: translateY(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.faa-falling.animated,
|
||||
.faa-falling.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-falling {
|
||||
@ -142,8 +205,38 @@
|
||||
animation: falling 3s linear infinite;
|
||||
}
|
||||
|
||||
.faa-falling.faa-reverse.animated,
|
||||
.faa-falling.faa-reverse.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-falling.faa-reverse,
|
||||
.faa-rising.animated,
|
||||
.faa-rising.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-rising {
|
||||
-webkit-animation: falling-reverse 2s linear infinite;
|
||||
animation: falling-reverse 2s linear infinite;
|
||||
}
|
||||
|
||||
.faa-falling.faa-reverse.animated.faa-fast,
|
||||
.faa-falling.faa-reverse.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-falling.faa-reverse.faa-fast,
|
||||
.faa-rising.animated.faa-fast,
|
||||
.faa-rising.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-rising.faa-fast {
|
||||
-webkit-animation: falling-reverse 1s linear infinite;
|
||||
animation: falling-reverse 1s linear infinite;
|
||||
}
|
||||
|
||||
.faa-falling.faa-reverse.animated.faa-slow,
|
||||
.faa-falling.faa-reverse.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-falling.faa-reverse.faa-slow,
|
||||
.faa-rising.animated.faa-slow,
|
||||
.faa-rising.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-rising.faa-slow {
|
||||
-webkit-animation: falling-reverse 3s linear infinite;
|
||||
animation: falling-reverse 3s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes flash {
|
||||
0%, 100%, 50% {
|
||||
0%, 50%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
25%, 75% {
|
||||
@ -152,7 +245,7 @@
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0%, 100%, 50% {
|
||||
0%, 50%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
25%, 75% {
|
||||
@ -182,27 +275,21 @@
|
||||
}
|
||||
|
||||
@-webkit-keyframes float {
|
||||
0% {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.faa-float.animated,
|
||||
@ -227,50 +314,38 @@
|
||||
}
|
||||
|
||||
@-webkit-keyframes horizontal {
|
||||
0% {
|
||||
0%, 12%, 24%, 36%, 100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
6% {
|
||||
6%, 18%, 30% {
|
||||
transform: translate(5px, 0);
|
||||
}
|
||||
12% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
18% {
|
||||
transform: translate(5px, 0);
|
||||
}
|
||||
24% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
30% {
|
||||
transform: translate(5px, 0);
|
||||
}
|
||||
36%, 100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes horizontal {
|
||||
0% {
|
||||
0%, 12%, 24%, 36%, 100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
6% {
|
||||
6%, 18%, 30% {
|
||||
transform: translate(5px, 0);
|
||||
}
|
||||
12% {
|
||||
}
|
||||
|
||||
@-webkit-keyframes horizontal-reverse {
|
||||
0%, 12%, 24%, 36%, 100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
18% {
|
||||
transform: translate(5px, 0);
|
||||
6%, 18%, 30% {
|
||||
transform: translate(-5px, 0);
|
||||
}
|
||||
24% {
|
||||
}
|
||||
|
||||
@keyframes horizontal-reverse {
|
||||
0%, 12%, 24%, 36%, 100% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
30% {
|
||||
transform: translate(5px, 0);
|
||||
}
|
||||
36%, 100% {
|
||||
transform: translate(0, 0);
|
||||
6%, 18%, 30% {
|
||||
transform: translate(-5px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@ -295,55 +370,25 @@
|
||||
animation: horizontal 3s ease infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes passing-reverse {
|
||||
0% {
|
||||
transform: translateX(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
.faa-horizontal.faa-reverse.animated,
|
||||
.faa-horizontal.faa-reverse.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-horizontal.faa-reverse {
|
||||
-webkit-animation: horizontal-reverse 2s ease infinite;
|
||||
animation: horizontal-reverse 2s ease infinite;
|
||||
}
|
||||
|
||||
@keyframes passing-reverse {
|
||||
0% {
|
||||
transform: translateX(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
.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 {
|
||||
-webkit-animation: horizontal-reverse 1s ease infinite;
|
||||
animation: horizontal-reverse 1s ease infinite;
|
||||
}
|
||||
|
||||
.faa-passing-reverse.animated,
|
||||
.faa-passing-reverse.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing-reverse {
|
||||
-webkit-animation: passing-reverse 2s linear infinite;
|
||||
animation: passing-reverse 2s linear infinite;
|
||||
}
|
||||
|
||||
.faa-passing-reverse.animated.faa-fast,
|
||||
.faa-passing-reverse.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-fast {
|
||||
-webkit-animation: passing-reverse 1s linear infinite;
|
||||
animation: passing-reverse 1s linear infinite;
|
||||
}
|
||||
|
||||
.faa-passing-reverse.animated.faa-slow,
|
||||
.faa-passing-reverse.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-slow {
|
||||
-webkit-animation: passing-reverse 3s linear infinite;
|
||||
animation: passing-reverse 3s linear 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 {
|
||||
-webkit-animation: horizontal-reverse 3s ease infinite;
|
||||
animation: horizontal-reverse 3s ease infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes passing {
|
||||
@ -376,6 +421,36 @@
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes passing-reverse {
|
||||
0% {
|
||||
transform: translateX(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes passing-reverse {
|
||||
0% {
|
||||
transform: translateX(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.faa-passing.animated,
|
||||
.faa-passing.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing {
|
||||
@ -397,28 +472,43 @@
|
||||
animation: passing 3s linear infinite;
|
||||
}
|
||||
|
||||
.faa-passing.faa-reverse.animated,
|
||||
.faa-passing.faa-reverse.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing.faa-reverse {
|
||||
-webkit-animation: passing-reverse 2s linear infinite;
|
||||
animation: passing-reverse 2s linear infinite;
|
||||
}
|
||||
|
||||
.faa-passing.faa-reverse.animated.faa-fast,
|
||||
.faa-passing.faa-reverse.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing.reverse.faa-fast {
|
||||
-webkit-animation: passing-reverse 1s linear infinite;
|
||||
animation: passing-reverse 1s linear infinite;
|
||||
}
|
||||
|
||||
.faa-passing.faa-reverse.animated.faa-slow,
|
||||
.faa-passing.faa-reverse.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing.faa-reverse.faa-slow {
|
||||
-webkit-animation: passing-reverse 3s linear infinite;
|
||||
animation: passing-reverse 3s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
0% {
|
||||
0%, 100% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
0%, 100% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.faa-pulse.animated,
|
||||
@ -449,10 +539,10 @@
|
||||
2% {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
4% {
|
||||
4%, 12% {
|
||||
transform: rotate(-18deg);
|
||||
}
|
||||
6% {
|
||||
6%, 14% {
|
||||
transform: rotate(18deg);
|
||||
}
|
||||
8% {
|
||||
@ -461,12 +551,6 @@
|
||||
10% {
|
||||
transform: rotate(22deg);
|
||||
}
|
||||
12% {
|
||||
transform: rotate(-18deg);
|
||||
}
|
||||
14% {
|
||||
transform: rotate(18deg);
|
||||
}
|
||||
16% {
|
||||
transform: rotate(-12deg);
|
||||
}
|
||||
@ -485,10 +569,10 @@
|
||||
2% {
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
4% {
|
||||
4%, 12% {
|
||||
transform: rotate(-18deg);
|
||||
}
|
||||
6% {
|
||||
6%, 14% {
|
||||
transform: rotate(18deg);
|
||||
}
|
||||
8% {
|
||||
@ -497,12 +581,6 @@
|
||||
10% {
|
||||
transform: rotate(22deg);
|
||||
}
|
||||
12% {
|
||||
transform: rotate(-18deg);
|
||||
}
|
||||
14% {
|
||||
transform: rotate(18deg);
|
||||
}
|
||||
16% {
|
||||
transform: rotate(-12deg);
|
||||
}
|
||||
@ -538,57 +616,6 @@
|
||||
animation: ring 3s ease infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rising {
|
||||
0% {
|
||||
transform: translateY(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rising {
|
||||
0% {
|
||||
transform: translateY(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.faa-rising.animated,
|
||||
.faa-rising.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-rising {
|
||||
-webkit-animation: rising 2s linear infinite;
|
||||
animation: rising 2s linear infinite;
|
||||
}
|
||||
|
||||
.faa-rising.animated.faa-fast,
|
||||
.faa-rising.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-rising.faa-fast {
|
||||
-webkit-animation: rising 1s linear infinite;
|
||||
animation: rising 1s linear infinite;
|
||||
}
|
||||
|
||||
.faa-rising.animated.faa-slow,
|
||||
.faa-rising.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-rising.faa-slow {
|
||||
-webkit-animation: rising 3s linear infinite;
|
||||
animation: rising 3s linear infinite;
|
||||
}
|
||||
|
||||
.faa-shake.animated,
|
||||
.faa-shake.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-shake {
|
||||
@ -599,15 +626,15 @@
|
||||
.faa-shake.animated.faa-fast,
|
||||
.faa-shake.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-shake.faa-fast {
|
||||
-webkit-animation: wrench 1.2s ease infinite;
|
||||
animation: wrench 1.2s ease infinite;
|
||||
-webkit-animation: wrench 1.25s ease infinite;
|
||||
animation: wrench 1.25s ease infinite;
|
||||
}
|
||||
|
||||
.faa-shake.animated.faa-slow,
|
||||
.faa-shake.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-shake.faa-slow {
|
||||
-webkit-animation: wrench 3.7s ease infinite;
|
||||
animation: wrench 3.7s ease infinite;
|
||||
-webkit-animation: wrench 3.75s ease infinite;
|
||||
animation: wrench 3.75s ease infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
@ -628,6 +655,24 @@
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin-reverse {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-359deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin-reverse {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-359deg);
|
||||
}
|
||||
}
|
||||
|
||||
.faa-spin.animated,
|
||||
.faa-spin.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-spin {
|
||||
@ -638,15 +683,36 @@
|
||||
.faa-spin.animated.faa-fast,
|
||||
.faa-spin.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-spin.faa-fast {
|
||||
-webkit-animation: spin 0.7s linear infinite;
|
||||
animation: spin 0.7s linear infinite;
|
||||
-webkit-animation: spin 0.75s linear infinite;
|
||||
animation: spin 0.75s linear infinite;
|
||||
}
|
||||
|
||||
.faa-spin.animated.faa-slow,
|
||||
.faa-spin.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-spin.faa-slow {
|
||||
-webkit-animation: spin 2.2s linear infinite;
|
||||
animation: spin 2.2s linear infinite;
|
||||
-webkit-animation: spin 2.25s linear infinite;
|
||||
animation: spin 2.25s linear infinite;
|
||||
}
|
||||
|
||||
.faa-spin.faa-reverse.animated,
|
||||
.faa-spin.faa-reverse.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-spin.faa-reverse {
|
||||
-webkit-animation: spin-reverse 1.5s linear infinite;
|
||||
animation: spin-reverse 1.5s linear infinite;
|
||||
}
|
||||
|
||||
.faa-spin.faa-reverse.animated.faa-fast,
|
||||
.faa-spin.faa-reverse.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-spin.faa-reverse.faa-fast {
|
||||
-webkit-animation: spin-reverse 0.75s linear infinite;
|
||||
animation: spin-reverse 0.75s linear infinite;
|
||||
}
|
||||
|
||||
.faa-spin.faa-reverse.animated.faa-slow,
|
||||
.faa-spin.faa-reverse.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-spin.faa-reverse.faa-slow {
|
||||
-webkit-animation: spin-reverse 2.25s linear infinite;
|
||||
animation: spin-reverse 2.25s linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes tada {
|
||||
@ -707,22 +773,10 @@
|
||||
}
|
||||
|
||||
@-webkit-keyframes vertical {
|
||||
0% {
|
||||
0%, 8%, 16% {
|
||||
transform: translate(0, -3px);
|
||||
}
|
||||
4% {
|
||||
transform: translate(0, 3px);
|
||||
}
|
||||
8% {
|
||||
transform: translate(0, -3px);
|
||||
}
|
||||
12% {
|
||||
transform: translate(0, 3px);
|
||||
}
|
||||
16% {
|
||||
transform: translate(0, -3px);
|
||||
}
|
||||
20% {
|
||||
4%, 12%, 20% {
|
||||
transform: translate(0, 3px);
|
||||
}
|
||||
22%, 100% {
|
||||
@ -731,22 +785,10 @@
|
||||
}
|
||||
|
||||
@keyframes vertical {
|
||||
0% {
|
||||
0%, 8%, 16% {
|
||||
transform: translate(0, -3px);
|
||||
}
|
||||
4% {
|
||||
transform: translate(0, 3px);
|
||||
}
|
||||
8% {
|
||||
transform: translate(0, -3px);
|
||||
}
|
||||
12% {
|
||||
transform: translate(0, 3px);
|
||||
}
|
||||
16% {
|
||||
transform: translate(0, -3px);
|
||||
}
|
||||
20% {
|
||||
4%, 12%, 20% {
|
||||
transform: translate(0, 3px);
|
||||
}
|
||||
22%, 100% {
|
||||
@ -771,8 +813,8 @@
|
||||
.faa-vertical.animated.faa-slow,
|
||||
.faa-vertical.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-vertical.faa-slow {
|
||||
-webkit-animation: vertical 4s ease infinite;
|
||||
animation: vertical 4s ease infinite;
|
||||
-webkit-animation: vertical 3s ease infinite;
|
||||
animation: vertical 3s ease infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes wrench {
|
||||
@ -782,42 +824,12 @@
|
||||
8% {
|
||||
transform: rotate(12deg);
|
||||
}
|
||||
10% {
|
||||
10%, 28%, 30%, 48%, 50%, 68% {
|
||||
transform: rotate(24deg);
|
||||
}
|
||||
18% {
|
||||
18%, 20%, 38%, 40%, 58%, 60% {
|
||||
transform: rotate(-24deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(-24deg);
|
||||
}
|
||||
28% {
|
||||
transform: rotate(24deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotate(24deg);
|
||||
}
|
||||
38% {
|
||||
transform: rotate(-24deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(-24deg);
|
||||
}
|
||||
48% {
|
||||
transform: rotate(24deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(24deg);
|
||||
}
|
||||
58% {
|
||||
transform: rotate(-24deg);
|
||||
}
|
||||
60% {
|
||||
transform: rotate(-24deg);
|
||||
}
|
||||
68% {
|
||||
transform: rotate(24deg);
|
||||
}
|
||||
75%, 100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
@ -830,42 +842,12 @@
|
||||
8% {
|
||||
transform: rotate(12deg);
|
||||
}
|
||||
10% {
|
||||
10%, 28%, 30%, 48%, 50%, 68% {
|
||||
transform: rotate(24deg);
|
||||
}
|
||||
18% {
|
||||
18%, 20%, 38%, 40%, 58%, 60% {
|
||||
transform: rotate(-24deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(-24deg);
|
||||
}
|
||||
28% {
|
||||
transform: rotate(24deg);
|
||||
}
|
||||
30% {
|
||||
transform: rotate(24deg);
|
||||
}
|
||||
38% {
|
||||
transform: rotate(-24deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(-24deg);
|
||||
}
|
||||
48% {
|
||||
transform: rotate(24deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotate(24deg);
|
||||
}
|
||||
58% {
|
||||
transform: rotate(-24deg);
|
||||
}
|
||||
60% {
|
||||
transform: rotate(-24deg);
|
||||
}
|
||||
68% {
|
||||
transform: rotate(24deg);
|
||||
}
|
||||
75%, 100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
@ -884,14 +866,14 @@
|
||||
.faa-wrench.animated.faa-fast,
|
||||
.faa-wrench.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-wrench.faa-fast {
|
||||
-webkit-animation: wrench 1.2s ease infinite;
|
||||
animation: wrench 1.2s ease infinite;
|
||||
-webkit-animation: wrench 1.25s ease infinite;
|
||||
animation: wrench 1.25s ease infinite;
|
||||
}
|
||||
|
||||
.faa-wrench.animated.faa-slow,
|
||||
.faa-wrench.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-wrench.faa-slow {
|
||||
-webkit-animation: wrench 3.7s ease infinite;
|
||||
animation: wrench 3.7s ease infinite;
|
||||
-webkit-animation: wrench 3.75s ease infinite;
|
||||
animation: wrench 3.75s ease infinite;
|
||||
}
|
||||
/*# sourceMappingURL=font-awesome-animation.css.map */
|
||||
File diff suppressed because one or more lines are too long
2
css/font-awesome-animation.min.css
vendored
2
css/font-awesome-animation.min.css
vendored
File diff suppressed because one or more lines are too long
@ -1,14 +1,13 @@
|
||||
@import 'scss/_speed';
|
||||
@import 'scss/bounce';
|
||||
@import 'scss/burst';
|
||||
@import 'scss/falling';
|
||||
@import 'scss/flash';
|
||||
@import 'scss/float';
|
||||
@import 'scss/horizontal';
|
||||
@import 'scss/passing-reverse';
|
||||
@import 'scss/passing';
|
||||
@import 'scss/pulse';
|
||||
@import 'scss/ring';
|
||||
@import 'scss/rising';
|
||||
@import 'scss/shake';
|
||||
@import 'scss/spin';
|
||||
@import 'scss/tada';
|
||||
|
||||
2
scss/_speed.scss
Normal file
2
scss/_speed.scss
Normal file
@ -0,0 +1,2 @@
|
||||
$faa-speed-coeff-fast: 0.5;
|
||||
$faa-speed-coeff-slow: 1.5;
|
||||
@ -1,26 +1,47 @@
|
||||
$faa-bounce-speed: 2s;
|
||||
@keyframes bounce {
|
||||
0%,10%,20%,50%,80%,100% {
|
||||
transform:translateY(0);
|
||||
0%, 10%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform:translateY(-15px);
|
||||
40%, 60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
60% {
|
||||
transform:translateY(-15px);
|
||||
}
|
||||
@keyframes bounce-reverse {
|
||||
0%, 10%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40%, 60% {
|
||||
transform: translateY(15px);
|
||||
}
|
||||
}
|
||||
.faa-bounce.animated,
|
||||
.faa-bounce.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-bounce {
|
||||
animation: bounce 2s ease infinite;
|
||||
animation: bounce $faa-bounce-speed ease infinite;
|
||||
}
|
||||
.faa-bounce.animated.faa-fast,
|
||||
.faa-bounce.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-bounce.faa-fast {
|
||||
animation: bounce 1s ease infinite;
|
||||
animation: bounce ($faa-bounce-speed * $faa-speed-coeff-fast) ease infinite;
|
||||
}
|
||||
.faa-bounce.animated.faa-slow,
|
||||
.faa-bounce.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-bounce.faa-slow {
|
||||
animation: bounce 3s ease infinite;
|
||||
animation: bounce ($faa-bounce-speed * $faa-speed-coeff-slow) ease infinite;
|
||||
}
|
||||
.faa-bounce.faa-reverse.animated,
|
||||
.faa-bounce.faa-reverse.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-bounce.faa-reverse {
|
||||
animation: bounce-reverse $faa-bounce-speed ease infinite;
|
||||
}
|
||||
.faa-bounce.faa-reverse.animated.faa-fast,
|
||||
.faa-bounce.faa-reverse.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-bounce.faa-reverse.faa-fast {
|
||||
animation: bounce-reverse ($faa-bounce-speed * $faa-speed-coeff-fast) ease infinite;
|
||||
}
|
||||
.faa-bounce.faa-reverse.animated.faa-slow,
|
||||
.faa-bounce.faa-reverse.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-bounce.faa-reverse.faa-slow {
|
||||
animation: bounce-reverse ($faa-bounce-speed * $faa-speed-coeff-slow) ease infinite;
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
$faa-burst-speed: 2s;
|
||||
@keyframes burst {
|
||||
0% {
|
||||
opacity:.6;
|
||||
@ -13,15 +14,15 @@
|
||||
.faa-burst.animated,
|
||||
.faa-burst.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-burst {
|
||||
animation: burst 2s infinite linear;
|
||||
animation: burst $faa-burst-speed infinite linear;
|
||||
}
|
||||
.faa-burst.animated.faa-fast,
|
||||
.faa-burst.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-burst.faa-fast {
|
||||
animation: burst 1s infinite linear;
|
||||
animation: burst ($faa-burst-speed * $faa-speed-coeff-fast) infinite linear;
|
||||
}
|
||||
.faa-burst.animated.faa-slow,
|
||||
.faa-burst.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-burst.faa-slow {
|
||||
animation: burst 3s infinite linear;
|
||||
animation: burst ($faa-burst-speed * $faa-speed-coeff-slow) infinite linear;
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
$faa-falling-speed: 2s;
|
||||
@keyframes falling {
|
||||
0% {
|
||||
transform:translateY(-50%);
|
||||
@ -12,18 +13,56 @@
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
@keyframes falling-reverse {
|
||||
0% {
|
||||
transform:translateY(50%);
|
||||
opacity:0;
|
||||
}
|
||||
50% {
|
||||
transform:translateY(0%);
|
||||
opacity:1;
|
||||
}
|
||||
100% {
|
||||
transform:translateY(-50%);
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
.faa-falling.animated,
|
||||
.faa-falling.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-falling {
|
||||
animation: falling 2s linear infinite;
|
||||
animation: falling $faa-falling-speed linear infinite;
|
||||
}
|
||||
.faa-falling.animated.faa-fast,
|
||||
.faa-falling.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-falling.faa-fast {
|
||||
animation: falling 1s linear infinite;
|
||||
animation: falling ($faa-falling-speed * $faa-speed-coeff-fast) linear infinite;
|
||||
}
|
||||
.faa-falling.animated.faa-slow,
|
||||
.faa-falling.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-falling.faa-slow {
|
||||
animation: falling 3s linear infinite;
|
||||
animation: falling ($faa-falling-speed * $faa-speed-coeff-slow) linear infinite;
|
||||
}
|
||||
.faa-falling.faa-reverse.animated,
|
||||
.faa-falling.faa-reverse.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-falling.faa-reverse,
|
||||
.faa-rising.animated,
|
||||
.faa-rising.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-rising {
|
||||
animation: falling-reverse $faa-falling-speed linear infinite;
|
||||
}
|
||||
.faa-falling.faa-reverse.animated.faa-fast,
|
||||
.faa-falling.faa-reverse.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-falling.faa-reverse.faa-fast,
|
||||
.faa-rising.animated.faa-fast,
|
||||
.faa-rising.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-rising.faa-fast {
|
||||
animation: falling-reverse ($faa-falling-speed * $faa-speed-coeff-fast) linear infinite;
|
||||
}
|
||||
.faa-falling.faa-reverse.animated.faa-slow,
|
||||
.faa-falling.faa-reverse.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-falling.faa-reverse.faa-slow,
|
||||
.faa-rising.animated.faa-slow,
|
||||
.faa-rising.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-rising.faa-slow {
|
||||
animation: falling-reverse ($faa-falling-speed * $faa-speed-coeff-slow) linear infinite;
|
||||
}
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
$faa-flash-speed: 2s;
|
||||
@keyframes flash {
|
||||
0%,100%,50% {
|
||||
opacity:1;
|
||||
0%, 50%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
25%,75%
|
||||
{
|
||||
opacity:0;
|
||||
25%, 75% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.faa-flash.animated,
|
||||
.faa-flash.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-flash {
|
||||
animation: flash 2s ease infinite;
|
||||
animation: flash $faa-flash-speed ease infinite;
|
||||
}
|
||||
.faa-flash.animated.faa-fast,
|
||||
.faa-flash.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-flash.faa-fast {
|
||||
animation: flash 1s ease infinite;
|
||||
animation: flash ($faa-flash-speed * $faa-speed-coeff-fast) ease infinite;
|
||||
}
|
||||
.faa-flash.animated.faa-slow,
|
||||
.faa-flash.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-flash.faa-slow {
|
||||
animation: flash 3s ease infinite;
|
||||
animation: flash ($faa-flash-speed * $faa-speed-coeff-slow) ease infinite;
|
||||
}
|
||||
|
||||
@ -1,26 +1,24 @@
|
||||
$faa-float-speed: 2s;
|
||||
@keyframes float{
|
||||
0% {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.faa-float.animated,
|
||||
.faa-float.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-float {
|
||||
animation: float 2s linear infinite;
|
||||
animation: float $faa-float-speed linear infinite;
|
||||
}
|
||||
.faa-float.animated.faa-fast,
|
||||
.faa-float.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-float.faa-fast {
|
||||
animation: float 1s linear infinite;
|
||||
animation: float ($faa-float-speed * $faa-speed-coeff-fast) linear infinite;
|
||||
}
|
||||
.faa-float.animated.faa-slow,
|
||||
.faa-float.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-float.faa-slow {
|
||||
animation: float 3s linear infinite;
|
||||
animation: float ($faa-float-speed * $faa-speed-coeff-slow) linear infinite;
|
||||
}
|
||||
|
||||
@ -1,38 +1,47 @@
|
||||
$faa-horizontal-speed: 2s;
|
||||
@keyframes horizontal {
|
||||
0% {
|
||||
transform:translate(0,0);
|
||||
0%, 12%, 24%, 36%, 100% {
|
||||
transform: translate(0,0);
|
||||
}
|
||||
6% {
|
||||
transform:translate(5px,0);
|
||||
6%, 18%, 30% {
|
||||
transform: translate(5px,0);
|
||||
}
|
||||
12% {
|
||||
transform:translate(0,0);
|
||||
}
|
||||
@keyframes horizontal-reverse {
|
||||
0%, 12%, 24%, 36%, 100% {
|
||||
transform: translate(0,0);
|
||||
}
|
||||
18% {
|
||||
transform:translate(5px,0);
|
||||
}
|
||||
24% {
|
||||
transform:translate(0,0);
|
||||
}
|
||||
30% {
|
||||
transform:translate(5px,0);
|
||||
}
|
||||
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 2s ease infinite;
|
||||
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 1s ease infinite;
|
||||
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 3s ease infinite;
|
||||
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;
|
||||
}
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
@keyframes passing-reverse {
|
||||
0% {
|
||||
transform:translateX(50%);
|
||||
opacity:0;
|
||||
}
|
||||
50% {
|
||||
transform:translateX(0%);
|
||||
opacity:1;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(-50%);
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
.faa-passing-reverse.animated,
|
||||
.faa-passing-reverse.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing-reverse {
|
||||
animation: passing-reverse 2s linear infinite;
|
||||
}
|
||||
.faa-passing-reverse.animated.faa-fast,
|
||||
.faa-passing-reverse.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-fast {
|
||||
animation: passing-reverse 1s linear infinite;
|
||||
}
|
||||
.faa-passing-reverse.animated.faa-slow,
|
||||
.faa-passing-reverse.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-slow {
|
||||
animation: passing-reverse 3s linear infinite;
|
||||
}
|
||||
@ -1,29 +1,59 @@
|
||||
$faa-passing-speed: 2s;
|
||||
@keyframes passing {
|
||||
0% {
|
||||
transform:translateX(-50%);
|
||||
opacity:0;
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform:translateX(0%);
|
||||
opacity:1;
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform:translateX(50%);
|
||||
opacity:0;
|
||||
transform: translateX(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes passing-reverse {
|
||||
0% {
|
||||
transform: translateX(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.faa-passing.animated,
|
||||
.faa-passing.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing {
|
||||
animation: passing 2s linear infinite;
|
||||
animation: passing $faa-passing-speed linear infinite;
|
||||
}
|
||||
.faa-passing.animated.faa-fast,
|
||||
.faa-passing.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing.faa-fast {
|
||||
animation: passing 1s linear infinite;
|
||||
animation: passing ($faa-passing-speed * $faa-speed-coeff-fast) linear infinite;
|
||||
}
|
||||
.faa-passing.animated.faa-slow,
|
||||
.faa-passing.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing.faa-slow {
|
||||
animation: passing 3s linear infinite;
|
||||
animation: passing ($faa-passing-speed * $faa-speed-coeff-slow) linear infinite;
|
||||
}
|
||||
.faa-passing.faa-reverse.animated,
|
||||
.faa-passing.faa-reverse.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing.faa-reverse {
|
||||
animation: passing-reverse $faa-passing-speed linear infinite;
|
||||
}
|
||||
.faa-passing.faa-reverse.animated.faa-fast,
|
||||
.faa-passing.faa-reverse.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing.reverse.faa-fast {
|
||||
animation: passing-reverse ($faa-passing-speed * $faa-speed-coeff-fast) linear infinite;
|
||||
}
|
||||
.faa-passing.faa-reverse.animated.faa-slow,
|
||||
.faa-passing.faa-reverse.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-passing.faa-reverse.faa-slow {
|
||||
animation: passing-reverse ($faa-passing-speed * $faa-speed-coeff-slow) linear infinite;
|
||||
}
|
||||
|
||||
@ -1,26 +1,24 @@
|
||||
$faa-pulse-speed: 2s;
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
0%, 100% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
.faa-pulse.animated,
|
||||
.faa-pulse.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-pulse {
|
||||
animation: pulse 2s linear infinite;
|
||||
animation: pulse $faa-pulse-speed linear infinite;
|
||||
}
|
||||
.faa-pulse.animated.faa-fast,
|
||||
.faa-pulse.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-pulse.faa-fast {
|
||||
animation: pulse 1s linear infinite;
|
||||
animation: pulse ($faa-pulse-speed * $faa-speed-coeff-fast) linear infinite;
|
||||
}
|
||||
.faa-pulse.animated.faa-slow,
|
||||
.faa-pulse.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-pulse.faa-slow {
|
||||
animation: pulse 3s linear infinite;
|
||||
animation: pulse ($faa-pulse-speed * $faa-speed-coeff-slow) linear infinite;
|
||||
}
|
||||
|
||||
@ -1,42 +1,37 @@
|
||||
$faa-ring-speed: 2s;
|
||||
@keyframes ring {
|
||||
0% {
|
||||
transform:rotate(-15deg);
|
||||
transform: rotate(-15deg);
|
||||
}
|
||||
2% {
|
||||
transform:rotate(15deg);
|
||||
transform: rotate(15deg);
|
||||
}
|
||||
4% {
|
||||
transform:rotate(-18deg);
|
||||
4%, 12% {
|
||||
transform: rotate(-18deg);
|
||||
}
|
||||
6% {
|
||||
transform:rotate(18deg);
|
||||
6%, 14% {
|
||||
transform: rotate(18deg);
|
||||
}
|
||||
8% {
|
||||
transform:rotate(-22deg);
|
||||
transform: rotate(-22deg);
|
||||
}
|
||||
10% {
|
||||
transform:rotate(22deg);
|
||||
}
|
||||
12% {
|
||||
transform:rotate(-18deg);
|
||||
}
|
||||
14% {
|
||||
transform:rotate(18deg);
|
||||
transform: rotate(22deg);
|
||||
}
|
||||
16% {
|
||||
transform:rotate(-12deg);
|
||||
transform: rotate(-12deg);
|
||||
}
|
||||
18% {
|
||||
transform:rotate(12deg);
|
||||
transform: rotate(12deg);
|
||||
}
|
||||
20%,100% {
|
||||
transform:rotate(0deg);
|
||||
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;
|
||||
animation: ring $faa-ring-speed ease infinite;
|
||||
transform-origin-x: 50%;
|
||||
transform-origin-y: 0px;
|
||||
transform-origin-z: initial;
|
||||
@ -44,10 +39,10 @@
|
||||
.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;
|
||||
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 3s ease infinite;
|
||||
animation: ring ($faa-ring-speed * $faa-speed-coeff-slow) ease infinite;
|
||||
}
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
@keyframes rising {
|
||||
0% {
|
||||
transform:translateY(50%);
|
||||
opacity:0;
|
||||
}
|
||||
50% {
|
||||
transform:translateY(0%);
|
||||
opacity:1;
|
||||
}
|
||||
100% {
|
||||
transform:translateY(-50%);
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
.faa-rising.animated,
|
||||
.faa-rising.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-rising {
|
||||
animation: rising 2s linear infinite;
|
||||
}
|
||||
.faa-rising.animated.faa-fast,
|
||||
.faa-rising.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-rising.faa-fast {
|
||||
animation: rising 1s linear infinite;
|
||||
}
|
||||
.faa-rising.animated.faa-slow,
|
||||
.faa-rising.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-rising.faa-slow {
|
||||
animation: rising 3s linear infinite;
|
||||
}
|
||||
@ -1,15 +1,16 @@
|
||||
$faa-shake-speed: 2.5s;
|
||||
.faa-shake.animated,
|
||||
.faa-shake.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-shake {
|
||||
animation: wrench 2.5s ease infinite;
|
||||
animation: wrench $faa-shake-speed ease infinite;
|
||||
}
|
||||
.faa-shake.animated.faa-fast,
|
||||
.faa-shake.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-shake.faa-fast {
|
||||
animation: wrench 1.2s ease infinite;
|
||||
animation: wrench ($faa-shake-speed * $faa-speed-coeff-fast) ease infinite;
|
||||
}
|
||||
.faa-shake.animated.faa-slow,
|
||||
.faa-shake.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-shake.faa-slow {
|
||||
animation: wrench 3.7s ease infinite;
|
||||
animation: wrench ($faa-shake-speed * $faa-speed-coeff-slow) ease infinite;
|
||||
}
|
||||
|
||||
@ -1,23 +1,47 @@
|
||||
@keyframes spin{
|
||||
$faa-spin-speed: 1.5s;
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform:rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform:rotate(359deg);
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin-reverse {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(-359deg);
|
||||
}
|
||||
}
|
||||
.faa-spin.animated,
|
||||
.faa-spin.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-spin {
|
||||
animation: spin 1.5s linear infinite;
|
||||
animation: spin $faa-spin-speed linear infinite;
|
||||
}
|
||||
.faa-spin.animated.faa-fast,
|
||||
.faa-spin.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-spin.faa-fast {
|
||||
animation: spin 0.7s linear infinite;
|
||||
animation: spin ($faa-spin-speed * $faa-speed-coeff-fast) linear infinite;
|
||||
}
|
||||
.faa-spin.animated.faa-slow,
|
||||
.faa-spin.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-spin.faa-slow {
|
||||
animation: spin 2.2s linear infinite;
|
||||
animation: spin ($faa-spin-speed * $faa-speed-coeff-slow) linear infinite;
|
||||
}
|
||||
.faa-spin.faa-reverse.animated,
|
||||
.faa-spin.faa-reverse.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-spin.faa-reverse {
|
||||
animation: spin-reverse $faa-spin-speed linear infinite;
|
||||
}
|
||||
.faa-spin.faa-reverse.animated.faa-fast,
|
||||
.faa-spin.faa-reverse.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-spin.faa-reverse.faa-fast {
|
||||
animation: spin-reverse ($faa-spin-speed * $faa-speed-coeff-fast) linear infinite;
|
||||
}
|
||||
.faa-spin.faa-reverse.animated.faa-slow,
|
||||
.faa-spin.faa-reverse.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-spin.faa-reverse.faa-slow {
|
||||
animation: spin-reverse ($faa-spin-speed * $faa-speed-coeff-slow) linear infinite;
|
||||
}
|
||||
|
||||
@ -1,32 +1,33 @@
|
||||
$faa-tada-speed: 2s;
|
||||
@keyframes tada {
|
||||
0% {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
10%,20% {
|
||||
transform:scale(.9) rotate(-8deg);;
|
||||
10%, 20% {
|
||||
transform: scale(.9) rotate(-8deg);;
|
||||
}
|
||||
30%,50%,70% {
|
||||
transform:scale(1.3) rotate(8deg);
|
||||
30%, 50%, 70% {
|
||||
transform: scale(1.3) rotate(8deg);
|
||||
}
|
||||
40%,60% {
|
||||
transform:scale(1.3) rotate(-8deg);
|
||||
40%, 60% {
|
||||
transform: scale(1.3) rotate(-8deg);
|
||||
}
|
||||
80%,100% {
|
||||
transform:scale(1) rotate(0);
|
||||
80%, 100% {
|
||||
transform: scale(1) rotate(0);
|
||||
}
|
||||
}
|
||||
.faa-tada.animated,
|
||||
.faa-tada.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-tada {
|
||||
animation: tada 2s linear infinite;
|
||||
animation: tada $faa-tada-speed linear infinite;
|
||||
}
|
||||
.faa-tada.animated.faa-fast,
|
||||
.faa-tada.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-tada.faa-fast {
|
||||
animation: tada 1s linear infinite;
|
||||
animation: tada ($faa-tada-speed * $faa-speed-coeff-fast) linear infinite;
|
||||
}
|
||||
.faa-tada.animated.faa-slow,
|
||||
.faa-tada.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-tada.faa-slow {
|
||||
animation: tada 3s linear infinite;
|
||||
animation: tada ($faa-tada-speed * $faa-speed-coeff-slow) linear infinite;
|
||||
}
|
||||
|
||||
@ -1,38 +1,27 @@
|
||||
$faa-vertical-speed: 2s;
|
||||
@keyframes vertical {
|
||||
0% {
|
||||
transform:translate(0,-3px);
|
||||
0%, 8%, 16% {
|
||||
transform: translate(0,-3px);
|
||||
}
|
||||
4% {
|
||||
transform:translate(0,3px);
|
||||
4%, 12%, 20% {
|
||||
transform: translate(0,3px);
|
||||
}
|
||||
8% {
|
||||
transform:translate(0,-3px);
|
||||
}
|
||||
12% {
|
||||
transform:translate(0,3px);
|
||||
}
|
||||
16% {
|
||||
transform:translate(0,-3px);
|
||||
}
|
||||
20% {
|
||||
transform:translate(0,3px);
|
||||
}
|
||||
22%,100% {
|
||||
transform:translate(0,0);
|
||||
22%, 100% {
|
||||
transform: translate(0,0);
|
||||
}
|
||||
}
|
||||
.faa-vertical.animated,
|
||||
.faa-vertical.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-vertical {
|
||||
animation: vertical 2s ease infinite;
|
||||
animation: vertical $faa-vertical-speed ease infinite;
|
||||
}
|
||||
.faa-vertical.animated.faa-fast,
|
||||
.faa-vertical.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-vertical.faa-fast {
|
||||
animation: vertical 1s ease infinite;
|
||||
animation: vertical ($faa-vertical-speed * $faa-speed-coeff-fast) ease infinite;
|
||||
}
|
||||
.faa-vertical.animated.faa-slow,
|
||||
.faa-vertical.animated-hover.faa-slow:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-vertical.faa-slow {
|
||||
animation: vertical 4s ease infinite;
|
||||
animation: vertical ($faa-vertical-speed * $faa-speed-coeff-slow) ease infinite;
|
||||
}
|
||||
|
||||
@ -1,54 +1,25 @@
|
||||
$faa-wrench-speed: 2.5s;
|
||||
@keyframes wrench {
|
||||
0% {
|
||||
transform:rotate(-12deg);
|
||||
transform: rotate(-12deg);
|
||||
}
|
||||
8% {
|
||||
transform:rotate(12deg);
|
||||
transform: rotate(12deg);
|
||||
}
|
||||
10% {
|
||||
transform:rotate(24deg);
|
||||
10%, 28%, 30%, 48%, 50%, 68% {
|
||||
transform: rotate(24deg);
|
||||
}
|
||||
18% {
|
||||
transform:rotate(-24deg);
|
||||
}
|
||||
20% {
|
||||
transform:rotate(-24deg);
|
||||
}
|
||||
28% {
|
||||
transform:rotate(24deg);
|
||||
}
|
||||
30% {
|
||||
transform:rotate(24deg);
|
||||
}
|
||||
38% {
|
||||
transform:rotate(-24deg);
|
||||
}
|
||||
40% {
|
||||
transform:rotate(-24deg);
|
||||
}
|
||||
48% {
|
||||
transform:rotate(24deg);
|
||||
}
|
||||
50% {
|
||||
transform:rotate(24deg);
|
||||
}
|
||||
58% {
|
||||
transform:rotate(-24deg);
|
||||
}
|
||||
60% {
|
||||
transform:rotate(-24deg);
|
||||
}
|
||||
68% {
|
||||
transform:rotate(24deg);
|
||||
18%, 20%, 38%, 40%, 58%, 60% {
|
||||
transform: rotate(-24deg);
|
||||
}
|
||||
75%,100% {
|
||||
transform:rotate(0deg);
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
.faa-wrench.animated,
|
||||
.faa-wrench.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-wrench {
|
||||
animation: wrench 2.5s ease infinite;
|
||||
animation: wrench $faa-wrench-speed ease infinite;
|
||||
transform-origin-x: 90%;
|
||||
transform-origin-y: 35%;
|
||||
transform-origin-z: initial;
|
||||
@ -56,10 +27,10 @@
|
||||
.faa-wrench.animated.faa-fast,
|
||||
.faa-wrench.animated-hover.faa-fast:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-wrench.faa-fast {
|
||||
animation: wrench 1.2s ease infinite;
|
||||
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 3.7s ease infinite;
|
||||
animation: wrench ($faa-wrench-speed * $faa-speed-coeff-slow) ease infinite;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user