_animated.scss (6515B)
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 }