c7bc4983 |
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 | |