ball-pulse-rise.css 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264
  1. @-webkit-keyframes ball-pulse-rise-even {
  2. 0% {
  3. -webkit-transform : scale(1.1);
  4. transform : scale(1.1);
  5. }
  6. 25% {
  7. -webkit-transform : translateY(-30px);
  8. transform : translateY(-30px);
  9. }
  10. 50% {
  11. -webkit-transform : scale(0.4);
  12. transform : scale(0.4);
  13. }
  14. 75% {
  15. -webkit-transform : translateY(30px);
  16. transform : translateY(30px);
  17. }
  18. 100% {
  19. -webkit-transform : translateY(0);
  20. transform : translateY(0);
  21. -webkit-transform : scale(1);
  22. transform : scale(1);
  23. }
  24. }
  25. @-moz-keyframes ball-pulse-rise-even {
  26. 0% {
  27. -moz-transform : scale(1.1);
  28. transform : scale(1.1);
  29. }
  30. 25% {
  31. -moz-transform : translateY(-30px);
  32. transform : translateY(-30px);
  33. }
  34. 50% {
  35. -moz-transform : scale(0.4);
  36. transform : scale(0.4);
  37. }
  38. 75% {
  39. -moz-transform : translateY(30px);
  40. transform : translateY(30px);
  41. }
  42. 100% {
  43. -moz-transform : translateY(0);
  44. transform : translateY(0);
  45. -moz-transform : scale(1);
  46. transform : scale(1);
  47. }
  48. }
  49. @-o-keyframes ball-pulse-rise-even {
  50. 0% {
  51. -o-transform : scale(1.1);
  52. transform : scale(1.1);
  53. }
  54. 25% {
  55. -o-transform : translateY(-30px);
  56. transform : translateY(-30px);
  57. }
  58. 50% {
  59. -o-transform : scale(0.4);
  60. transform : scale(0.4);
  61. }
  62. 75% {
  63. -o-transform : translateY(30px);
  64. transform : translateY(30px);
  65. }
  66. 100% {
  67. -o-transform : translateY(0);
  68. transform : translateY(0);
  69. -o-transform : scale(1);
  70. transform : scale(1);
  71. }
  72. }
  73. @keyframes ball-pulse-rise-even {
  74. 0% {
  75. -webkit-transform : scale(1.1);
  76. -moz-transform : scale(1.1);
  77. -o-transform : scale(1.1);
  78. transform : scale(1.1);
  79. }
  80. 25% {
  81. -webkit-transform : translateY(-30px);
  82. -moz-transform : translateY(-30px);
  83. -o-transform : translateY(-30px);
  84. transform : translateY(-30px);
  85. }
  86. 50% {
  87. -webkit-transform : scale(0.4);
  88. -moz-transform : scale(0.4);
  89. -o-transform : scale(0.4);
  90. transform : scale(0.4);
  91. }
  92. 75% {
  93. -webkit-transform : translateY(30px);
  94. -moz-transform : translateY(30px);
  95. -o-transform : translateY(30px);
  96. transform : translateY(30px);
  97. }
  98. 100% {
  99. -webkit-transform : translateY(0);
  100. -moz-transform : translateY(0);
  101. -o-transform : translateY(0);
  102. transform : translateY(0);
  103. -webkit-transform : scale(1);
  104. -moz-transform : scale(1);
  105. -o-transform : scale(1);
  106. transform : scale(1);
  107. }
  108. }
  109. @-webkit-keyframes ball-pulse-rise-odd {
  110. 0% {
  111. -webkit-transform : scale(0.4);
  112. transform : scale(0.4);
  113. }
  114. 25% {
  115. -webkit-transform : translateY(30px);
  116. transform : translateY(30px);
  117. }
  118. 50% {
  119. -webkit-transform : scale(1.1);
  120. transform : scale(1.1);
  121. }
  122. 75% {
  123. -webkit-transform : translateY(-30px);
  124. transform : translateY(-30px);
  125. }
  126. 100% {
  127. -webkit-transform : translateY(0);
  128. transform : translateY(0);
  129. -webkit-transform : scale(0.75);
  130. transform : scale(0.75);
  131. }
  132. }
  133. @-moz-keyframes ball-pulse-rise-odd {
  134. 0% {
  135. -moz-transform : scale(0.4);
  136. transform : scale(0.4);
  137. }
  138. 25% {
  139. -moz-transform : translateY(30px);
  140. transform : translateY(30px);
  141. }
  142. 50% {
  143. -moz-transform : scale(1.1);
  144. transform : scale(1.1);
  145. }
  146. 75% {
  147. -moz-transform : translateY(-30px);
  148. transform : translateY(-30px);
  149. }
  150. 100% {
  151. -moz-transform : translateY(0);
  152. transform : translateY(0);
  153. -moz-transform : scale(0.75);
  154. transform : scale(0.75);
  155. }
  156. }
  157. @-o-keyframes ball-pulse-rise-odd {
  158. 0% {
  159. -o-transform : scale(0.4);
  160. transform : scale(0.4);
  161. }
  162. 25% {
  163. -o-transform : translateY(30px);
  164. transform : translateY(30px);
  165. }
  166. 50% {
  167. -o-transform : scale(1.1);
  168. transform : scale(1.1);
  169. }
  170. 75% {
  171. -o-transform : translateY(-30px);
  172. transform : translateY(-30px);
  173. }
  174. 100% {
  175. -o-transform : translateY(0);
  176. transform : translateY(0);
  177. -o-transform : scale(0.75);
  178. transform : scale(0.75);
  179. }
  180. }
  181. @keyframes ball-pulse-rise-odd {
  182. 0% {
  183. -webkit-transform : scale(0.4);
  184. -moz-transform : scale(0.4);
  185. -o-transform : scale(0.4);
  186. transform : scale(0.4);
  187. }
  188. 25% {
  189. -webkit-transform : translateY(30px);
  190. -moz-transform : translateY(30px);
  191. -o-transform : translateY(30px);
  192. transform : translateY(30px);
  193. }
  194. 50% {
  195. -webkit-transform : scale(1.1);
  196. -moz-transform : scale(1.1);
  197. -o-transform : scale(1.1);
  198. transform : scale(1.1);
  199. }
  200. 75% {
  201. -webkit-transform : translateY(-30px);
  202. -moz-transform : translateY(-30px);
  203. -o-transform : translateY(-30px);
  204. transform : translateY(-30px);
  205. }
  206. 100% {
  207. -webkit-transform : translateY(0);
  208. -moz-transform : translateY(0);
  209. -o-transform : translateY(0);
  210. transform : translateY(0);
  211. -webkit-transform : scale(0.75);
  212. -moz-transform : scale(0.75);
  213. -o-transform : scale(0.75);
  214. transform : scale(0.75);
  215. }
  216. }
  217. .ball-pulse-rise > div {
  218. background-color : #55595C;
  219. width : 15px;
  220. height : 15px;
  221. border-radius : 100%;
  222. margin : 2px;
  223. -webkit-animation-fill-mode : both;
  224. -moz-animation-fill-mode : both;
  225. -o-animation-fill-mode : both;
  226. animation-fill-mode : both;
  227. display : inline-block;
  228. -webkit-animation-duration : 1s;
  229. -moz-animation-duration : 1s;
  230. -o-animation-duration : 1s;
  231. animation-duration : 1s;
  232. -webkit-animation-timing-function : cubic-bezier(0.15, 0.46, 0.9, 0.6);
  233. -moz-animation-timing-function : cubic-bezier(0.15, 0.46, 0.9, 0.6);
  234. -o-animation-timing-function : cubic-bezier(0.15, 0.46, 0.9, 0.6);
  235. animation-timing-function : cubic-bezier(0.15, 0.46, 0.9, 0.6);
  236. -webkit-animation-iteration-count : infinite;
  237. -moz-animation-iteration-count : infinite;
  238. -o-animation-iteration-count : infinite;
  239. animation-iteration-count : infinite;
  240. -webkit-animation-delay : 0;
  241. -moz-animation-delay : 0;
  242. -o-animation-delay : 0;
  243. animation-delay : 0;
  244. }
  245. .ball-pulse-rise > div:nth-child(2n) {
  246. -webkit-animation-name : ball-pulse-rise-even;
  247. -moz-animation-name : ball-pulse-rise-even;
  248. -o-animation-name : ball-pulse-rise-even;
  249. animation-name : ball-pulse-rise-even;
  250. }
  251. .ball-pulse-rise > div:nth-child(2n-1) {
  252. -webkit-animation-name : ball-pulse-rise-odd;
  253. -moz-animation-name : ball-pulse-rise-odd;
  254. -o-animation-name : ball-pulse-rise-odd;
  255. animation-name : ball-pulse-rise-odd;
  256. }