_animations-basic.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. /*!
  2. * animate.css -http://daneden.me/animate
  3. * Version - 3.7.0
  4. * Licensed under the MIT license - http://opensource.org/licenses/MIT
  5. *
  6. * Copyright (c) 2018 Daniel Eden
  7. */
  8. .animated {
  9. animation-duration: 1s;
  10. animation-fill-mode: both;
  11. &.infinite {
  12. animation-iteration-count: infinite;
  13. }
  14. &.delay-1s {
  15. animation-delay: 1s;
  16. }
  17. &.delay-2s {
  18. animation-delay: 2s;
  19. }
  20. &.delay-3s {
  21. animation-delay: 3s;
  22. }
  23. &.delay-4s {
  24. animation-delay: 4s;
  25. }
  26. &.delay-5s {
  27. animation-delay: 5s;
  28. }
  29. &.fast {
  30. animation-duration: 800ms;
  31. }
  32. &.faster {
  33. animation-duration: 500ms;
  34. }
  35. &.slow {
  36. animation-duration: 2s;
  37. }
  38. &.slower {
  39. animation-duration: 3s;
  40. }
  41. }
  42. @media (prefers-reduced-motion) {
  43. .animated {
  44. animation: unset !important;
  45. transition: none !important;
  46. }
  47. }
  48. @keyframes fadeIn {
  49. from {
  50. opacity: 0;
  51. }
  52. to {
  53. opacity: 1;
  54. }
  55. }
  56. .fadeIn {
  57. animation-name: fadeIn;
  58. }
  59. @keyframes fadeInDown {
  60. from {
  61. opacity: 0;
  62. transform: translate3d(0, -100%, 0);
  63. }
  64. to {
  65. opacity: 1;
  66. transform: translate3d(0, 0, 0);
  67. }
  68. }
  69. .fadeInDown {
  70. animation-name: fadeInDown;
  71. }
  72. @keyframes fadeInLeft {
  73. from {
  74. opacity: 0;
  75. transform: translate3d(-100%, 0, 0);
  76. }
  77. to {
  78. opacity: 1;
  79. transform: translate3d(0, 0, 0);
  80. }
  81. }
  82. .fadeInLeft {
  83. animation-name: fadeInLeft;
  84. }
  85. @keyframes fadeInRight {
  86. from {
  87. opacity: 0;
  88. transform: translate3d(100%, 0, 0);
  89. }
  90. to {
  91. opacity: 1;
  92. transform: translate3d(0, 0, 0);
  93. }
  94. }
  95. .fadeInRight {
  96. animation-name: fadeInRight;
  97. }
  98. @keyframes fadeInUp {
  99. from {
  100. opacity: 0;
  101. transform: translate3d(0, 100%, 0);
  102. }
  103. to {
  104. opacity: 1;
  105. transform: translate3d(0, 0, 0);
  106. }
  107. }
  108. .fadeInUp {
  109. animation-name: fadeInUp;
  110. }
  111. @keyframes fadeOut {
  112. from {
  113. opacity: 1;
  114. }
  115. to {
  116. opacity: 0;
  117. }
  118. }
  119. .fadeOut {
  120. animation-name: fadeOut;
  121. }
  122. @keyframes fadeOutDown {
  123. from {
  124. opacity: 1;
  125. }
  126. to {
  127. opacity: 0;
  128. transform: translate3d(0, 100%, 0);
  129. }
  130. }
  131. .fadeOutDown {
  132. animation-name: fadeOutDown;
  133. }
  134. @keyframes fadeOutLeft {
  135. from {
  136. opacity: 1;
  137. }
  138. to {
  139. opacity: 0;
  140. transform: translate3d(-100%, 0, 0);
  141. }
  142. }
  143. .fadeOutLeft {
  144. animation-name: fadeOutLeft;
  145. }
  146. @keyframes fadeOutRight {
  147. from {
  148. opacity: 1;
  149. }
  150. to {
  151. opacity: 0;
  152. transform: translate3d(100%, 0, 0);
  153. }
  154. }
  155. .fadeOutRight {
  156. animation-name: fadeOutRight;
  157. }
  158. @keyframes fadeOutUp {
  159. from {
  160. opacity: 1;
  161. }
  162. to {
  163. opacity: 0;
  164. transform: translate3d(0, -100%, 0);
  165. }
  166. }
  167. .fadeOutUp {
  168. animation-name: fadeOutUp;
  169. }