|
| 1 | +// animating icons |
| 2 | +// -------------------------- |
| 3 | + |
| 4 | +.#{$fa-css-prefix}-beat { |
| 5 | + animation-name: #{$fa-css-prefix}-beat; |
| 6 | + animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); |
| 7 | + animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
| 8 | + animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); |
| 9 | + animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
| 10 | + animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out); |
| 11 | +} |
| 12 | + |
| 13 | +.#{$fa-css-prefix}-bounce { |
| 14 | + animation-name: #{$fa-css-prefix}-bounce; |
| 15 | + animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); |
| 16 | + animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
| 17 | + animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); |
| 18 | + animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
| 19 | + animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(0.280, 0.840, 0.420, 1)); |
| 20 | +} |
| 21 | + |
| 22 | +.#{$fa-css-prefix}-fade { |
| 23 | + animation-name: #{$fa-css-prefix}-fade; |
| 24 | + animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); |
| 25 | + animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
| 26 | + animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); |
| 27 | + animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
| 28 | + animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1)); |
| 29 | +} |
| 30 | + |
| 31 | +.#{$fa-css-prefix}-beat-fade { |
| 32 | + animation-name: #{$fa-css-prefix}-beat-fade; |
| 33 | + animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); |
| 34 | + animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
| 35 | + animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); |
| 36 | + animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
| 37 | + animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, cubic-bezier(.4,0,.6,1)); |
| 38 | +} |
| 39 | + |
| 40 | +.#{$fa-css-prefix}-flip { |
| 41 | + animation-name: #{$fa-css-prefix}-flip; |
| 42 | + animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); |
| 43 | + animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
| 44 | + animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); |
| 45 | + animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
| 46 | + animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, ease-in-out); |
| 47 | +} |
| 48 | + |
| 49 | +.#{$fa-css-prefix}-shake { |
| 50 | + animation-name: #{$fa-css-prefix}-shake; |
| 51 | + animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); |
| 52 | + animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
| 53 | + animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); |
| 54 | + animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
| 55 | + animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear); |
| 56 | +} |
| 57 | + |
| 58 | +.#{$fa-css-prefix}-spin { |
| 59 | + animation-name: #{$fa-css-prefix}-spin; |
| 60 | + animation-delay: var(--#{$fa-css-prefix}-animation-delay, 0s); |
| 61 | + animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
| 62 | + animation-duration: var(--#{$fa-css-prefix}-animation-duration, 2s); |
| 63 | + animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
| 64 | + animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, linear); |
| 65 | +} |
| 66 | + |
| 67 | +.#{$fa-css-prefix}-spin-reverse { |
| 68 | + --#{$fa-css-prefix}-animation-direction: reverse; |
| 69 | +} |
| 70 | + |
| 71 | +.#{$fa-css-prefix}-pulse, |
| 72 | +.#{$fa-css-prefix}-spin-pulse { |
| 73 | + animation-name: #{$fa-css-prefix}-spin; |
| 74 | + animation-direction: var(--#{$fa-css-prefix}-animation-direction, normal); |
| 75 | + animation-duration: var(--#{$fa-css-prefix}-animation-duration, 1s); |
| 76 | + animation-iteration-count: var(--#{$fa-css-prefix}-animation-iteration-count, infinite); |
| 77 | + animation-timing-function: var(--#{$fa-css-prefix}-animation-timing, steps(8)); |
| 78 | +} |
| 79 | + |
| 80 | +// if agent or operating system prefers reduced motion, disable animations |
| 81 | +// see: https://www.smashingmagazine.com/2020/09/design-reduced-motion-sensitivities/ |
| 82 | +// see: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion |
| 83 | +@media (prefers-reduced-motion: reduce) { |
| 84 | + .#{$fa-css-prefix}-beat, |
| 85 | + .#{$fa-css-prefix}-bounce, |
| 86 | + .#{$fa-css-prefix}-fade, |
| 87 | + .#{$fa-css-prefix}-beat-fade, |
| 88 | + .#{$fa-css-prefix}-flip, |
| 89 | + .#{$fa-css-prefix}-pulse, |
| 90 | + .#{$fa-css-prefix}-shake, |
| 91 | + .#{$fa-css-prefix}-spin, |
| 92 | + .#{$fa-css-prefix}-spin-pulse { |
| 93 | + animation-delay: -1ms; |
| 94 | + animation-duration: 1ms; |
| 95 | + animation-iteration-count: 1; |
| 96 | + transition-delay: 0s; |
| 97 | + transition-duration: 0s; |
| 98 | + } |
| 99 | +} |
| 100 | + |
| 101 | +@keyframes #{$fa-css-prefix}-beat { |
| 102 | + 0%, 90% { transform: scale(1); } |
| 103 | + 45% { transform: scale(var(--#{$fa-css-prefix}-beat-scale, 1.25)); } |
| 104 | +} |
| 105 | + |
| 106 | +@keyframes #{$fa-css-prefix}-bounce { |
| 107 | + 0% { transform: scale(1,1) translateY(0); } |
| 108 | + 10% { transform: scale(var(--#{$fa-css-prefix}-bounce-start-scale-x, 1.1),var(--#{$fa-css-prefix}-bounce-start-scale-y, 0.9)) translateY(0); } |
| 109 | + 30% { transform: scale(var(--#{$fa-css-prefix}-bounce-jump-scale-x, 0.9),var(--#{$fa-css-prefix}-bounce-jump-scale-y, 1.1)) translateY(var(--#{$fa-css-prefix}-bounce-height, -0.5em)); } |
| 110 | + 50% { transform: scale(var(--#{$fa-css-prefix}-bounce-land-scale-x, 1.05),var(--#{$fa-css-prefix}-bounce-land-scale-y, 0.95)) translateY(0); } |
| 111 | + 57% { transform: scale(1,1) translateY(var(--#{$fa-css-prefix}-bounce-rebound, -0.125em)); } |
| 112 | + 64% { transform: scale(1,1) translateY(0); } |
| 113 | + 100% { transform: scale(1,1) translateY(0); } |
| 114 | +} |
| 115 | + |
| 116 | +@keyframes #{$fa-css-prefix}-fade { |
| 117 | + 50% { opacity: var(--#{$fa-css-prefix}-fade-opacity, 0.4); } |
| 118 | +} |
| 119 | + |
| 120 | +@keyframes #{$fa-css-prefix}-beat-fade { |
| 121 | + 0%, 100% { |
| 122 | + opacity: var(--#{$fa-css-prefix}-beat-fade-opacity, 0.4); |
| 123 | + transform: scale(1); |
| 124 | + } |
| 125 | + 50% { |
| 126 | + opacity: 1; |
| 127 | + transform: scale(var(--#{$fa-css-prefix}-beat-fade-scale, 1.125)); |
| 128 | + } |
| 129 | +} |
| 130 | + |
| 131 | +@keyframes #{$fa-css-prefix}-flip { |
| 132 | + 50% { |
| 133 | + transform: rotate3d(var(--#{$fa-css-prefix}-flip-x, 0), var(--#{$fa-css-prefix}-flip-y, 1), var(--#{$fa-css-prefix}-flip-z, 0), var(--#{$fa-css-prefix}-flip-angle, -180deg)); |
| 134 | + } |
| 135 | +} |
| 136 | + |
| 137 | +@keyframes #{$fa-css-prefix}-shake { |
| 138 | + 0% { transform: rotate(-15deg); } |
| 139 | + 4% { transform: rotate(15deg); } |
| 140 | + 8%, 24% { transform: rotate(-18deg); } |
| 141 | + 12%, 28% { transform: rotate(18deg); } |
| 142 | + 16% { transform: rotate(-22deg); } |
| 143 | + 20% { transform: rotate(22deg); } |
| 144 | + 32% { transform: rotate(-12deg); } |
| 145 | + 36% { transform: rotate(12deg); } |
| 146 | + 40%, 100% { transform: rotate(0deg); } |
| 147 | +} |
| 148 | + |
| 149 | +@keyframes #{$fa-css-prefix}-spin { |
| 150 | + 0% { transform: rotate(0deg); } |
| 151 | + 100% { transform: rotate(360deg); } |
| 152 | +} |
| 153 | + |
0 commit comments