animate.css 4.1 KB

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