_animated.scss 6.4 KB

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