_bounce.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. @mixin timing-function {
  2. animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  3. }
  4. @keyframes #{$rt-namespace}__bounceInRight {
  5. from,
  6. 60%,
  7. 75%,
  8. 90%,
  9. to {
  10. @include timing-function;
  11. }
  12. from {
  13. opacity: 0;
  14. transform: translate3d(3000px, 0, 0);
  15. }
  16. 60% {
  17. opacity: 1;
  18. transform: translate3d(-25px, 0, 0);
  19. }
  20. 75% {
  21. transform: translate3d(10px, 0, 0);
  22. }
  23. 90% {
  24. transform: translate3d(-5px, 0, 0);
  25. }
  26. to {
  27. transform: none;
  28. }
  29. }
  30. @keyframes #{$rt-namespace}__bounceOutRight {
  31. 20% {
  32. opacity: 1;
  33. transform: translate3d(-20px, 0, 0);
  34. }
  35. to {
  36. opacity: 0;
  37. transform: translate3d(2000px, 0, 0);
  38. }
  39. }
  40. @keyframes #{$rt-namespace}__bounceInLeft {
  41. from,
  42. 60%,
  43. 75%,
  44. 90%,
  45. to {
  46. @include timing-function;
  47. }
  48. 0% {
  49. opacity: 0;
  50. transform: translate3d(-3000px, 0, 0);
  51. }
  52. 60% {
  53. opacity: 1;
  54. transform: translate3d(25px, 0, 0);
  55. }
  56. 75% {
  57. transform: translate3d(-10px, 0, 0);
  58. }
  59. 90% {
  60. transform: translate3d(5px, 0, 0);
  61. }
  62. to {
  63. transform: none;
  64. }
  65. }
  66. @keyframes #{$rt-namespace}__bounceOutLeft {
  67. 20% {
  68. opacity: 1;
  69. transform: translate3d(20px, 0, 0);
  70. }
  71. to {
  72. opacity: 0;
  73. transform: translate3d(-2000px, 0, 0);
  74. }
  75. }
  76. @keyframes #{$rt-namespace}__bounceInUp {
  77. from,
  78. 60%,
  79. 75%,
  80. 90%,
  81. to {
  82. @include timing-function;
  83. }
  84. from {
  85. opacity: 0;
  86. transform: translate3d(0, 3000px, 0);
  87. }
  88. 60% {
  89. opacity: 1;
  90. transform: translate3d(0, -20px, 0);
  91. }
  92. 75% {
  93. transform: translate3d(0, 10px, 0);
  94. }
  95. 90% {
  96. transform: translate3d(0, -5px, 0);
  97. }
  98. to {
  99. transform: translate3d(0, 0, 0);
  100. }
  101. }
  102. @keyframes #{$rt-namespace}__bounceOutUp {
  103. 20% {
  104. transform: translate3d(0, -10px, 0);
  105. }
  106. 40%,
  107. 45% {
  108. opacity: 1;
  109. transform: translate3d(0, 20px, 0);
  110. }
  111. to {
  112. opacity: 0;
  113. transform: translate3d(0, -2000px, 0);
  114. }
  115. }
  116. @keyframes #{$rt-namespace}__bounceInDown {
  117. from,
  118. 60%,
  119. 75%,
  120. 90%,
  121. to {
  122. @include timing-function;
  123. }
  124. 0% {
  125. opacity: 0;
  126. transform: translate3d(0, -3000px, 0);
  127. }
  128. 60% {
  129. opacity: 1;
  130. transform: translate3d(0, 25px, 0);
  131. }
  132. 75% {
  133. transform: translate3d(0, -10px, 0);
  134. }
  135. 90% {
  136. transform: translate3d(0, 5px, 0);
  137. }
  138. to {
  139. transform: none;
  140. }
  141. }
  142. @keyframes #{$rt-namespace}__bounceOutDown {
  143. 20% {
  144. transform: translate3d(0, 10px, 0);
  145. }
  146. 40%,
  147. 45% {
  148. opacity: 1;
  149. transform: translate3d(0, -20px, 0);
  150. }
  151. to {
  152. opacity: 0;
  153. transform: translate3d(0, 2000px, 0);
  154. }
  155. }
  156. .#{$rt-namespace}__bounce-enter {
  157. &--top-left,
  158. &--bottom-left {
  159. animation-name: #{$rt-namespace}__bounceInLeft;
  160. }
  161. &--top-right,
  162. &--bottom-right {
  163. animation-name: #{$rt-namespace}__bounceInRight;
  164. }
  165. &--top-center {
  166. animation-name: #{$rt-namespace}__bounceInDown;
  167. }
  168. &--bottom-center {
  169. animation-name: #{$rt-namespace}__bounceInUp;
  170. }
  171. }
  172. .#{$rt-namespace}__bounce-exit {
  173. &--top-left,
  174. &--bottom-left {
  175. animation-name: #{$rt-namespace}__bounceOutLeft;
  176. }
  177. &--top-right,
  178. &--bottom-right {
  179. animation-name: #{$rt-namespace}__bounceOutRight;
  180. }
  181. &--top-center {
  182. animation-name: #{$rt-namespace}__bounceOutUp;
  183. }
  184. &--bottom-center {
  185. animation-name: #{$rt-namespace}__bounceOutDown;
  186. }
  187. }