ball-grid-pulse.css 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192
  1. @-webkit-keyframes ball-grid-pulse {
  2. 0% {
  3. -webkit-transform : scale(1);
  4. transform : scale(1);
  5. }
  6. 50% {
  7. -webkit-transform : scale(0.5);
  8. transform : scale(0.5);
  9. opacity : 0.7;
  10. }
  11. 100% {
  12. -webkit-transform : scale(1);
  13. transform : scale(1);
  14. opacity : 1;
  15. }
  16. }
  17. @-moz-keyframes ball-grid-pulse {
  18. 0% {
  19. -moz-transform : scale(1);
  20. transform : scale(1);
  21. }
  22. 50% {
  23. -moz-transform : scale(0.5);
  24. transform : scale(0.5);
  25. opacity : 0.7;
  26. }
  27. 100% {
  28. -moz-transform : scale(1);
  29. transform : scale(1);
  30. opacity : 1;
  31. }
  32. }
  33. @-o-keyframes ball-grid-pulse {
  34. 0% {
  35. -o-transform : scale(1);
  36. transform : scale(1);
  37. }
  38. 50% {
  39. -o-transform : scale(0.5);
  40. transform : scale(0.5);
  41. opacity : 0.7;
  42. }
  43. 100% {
  44. -o-transform : scale(1);
  45. transform : scale(1);
  46. opacity : 1;
  47. }
  48. }
  49. @keyframes ball-grid-pulse {
  50. 0% {
  51. -webkit-transform : scale(1);
  52. -moz-transform : scale(1);
  53. -o-transform : scale(1);
  54. transform : scale(1);
  55. }
  56. 50% {
  57. -webkit-transform : scale(0.5);
  58. -moz-transform : scale(0.5);
  59. -o-transform : scale(0.5);
  60. transform : scale(0.5);
  61. opacity : 0.7;
  62. }
  63. 100% {
  64. -webkit-transform : scale(1);
  65. -moz-transform : scale(1);
  66. -o-transform : scale(1);
  67. transform : scale(1);
  68. opacity : 1;
  69. }
  70. }
  71. .ball-grid-pulse {
  72. width : 57px;
  73. }
  74. .ball-grid-pulse > div:nth-child(1) {
  75. -webkit-animation-delay : 0.21s;
  76. -moz-animation-delay : 0.21s;
  77. -o-animation-delay : 0.21s;
  78. animation-delay : 0.21s;
  79. -webkit-animation-duration : 1.52s;
  80. -moz-animation-duration : 1.52s;
  81. -o-animation-duration : 1.52s;
  82. animation-duration : 1.52s;
  83. }
  84. .ball-grid-pulse > div:nth-child(2) {
  85. -webkit-animation-delay : 0.03s;
  86. -moz-animation-delay : 0.03s;
  87. -o-animation-delay : 0.03s;
  88. animation-delay : 0.03s;
  89. -webkit-animation-duration : 1.36s;
  90. -moz-animation-duration : 1.36s;
  91. -o-animation-duration : 1.36s;
  92. animation-duration : 1.36s;
  93. }
  94. .ball-grid-pulse > div:nth-child(3) {
  95. -webkit-animation-delay : 0.75s;
  96. -moz-animation-delay : 0.75s;
  97. -o-animation-delay : 0.75s;
  98. animation-delay : 0.75s;
  99. -webkit-animation-duration : 0.95s;
  100. -moz-animation-duration : 0.95s;
  101. -o-animation-duration : 0.95s;
  102. animation-duration : 0.95s;
  103. }
  104. .ball-grid-pulse > div:nth-child(4) {
  105. -webkit-animation-delay : -0.09s;
  106. -moz-animation-delay : -0.09s;
  107. -o-animation-delay : -0.09s;
  108. animation-delay : -0.09s;
  109. -webkit-animation-duration : 0.62s;
  110. -moz-animation-duration : 0.62s;
  111. -o-animation-duration : 0.62s;
  112. animation-duration : 0.62s;
  113. }
  114. .ball-grid-pulse > div:nth-child(5) {
  115. -webkit-animation-delay : 0.36s;
  116. -moz-animation-delay : 0.36s;
  117. -o-animation-delay : 0.36s;
  118. animation-delay : 0.36s;
  119. -webkit-animation-duration : 0.92s;
  120. -moz-animation-duration : 0.92s;
  121. -o-animation-duration : 0.92s;
  122. animation-duration : 0.92s;
  123. }
  124. .ball-grid-pulse > div:nth-child(6) {
  125. -webkit-animation-delay : 0.65s;
  126. -moz-animation-delay : 0.65s;
  127. -o-animation-delay : 0.65s;
  128. animation-delay : 0.65s;
  129. -webkit-animation-duration : 1.06s;
  130. -moz-animation-duration : 1.06s;
  131. -o-animation-duration : 1.06s;
  132. animation-duration : 1.06s;
  133. }
  134. .ball-grid-pulse > div:nth-child(7) {
  135. -webkit-animation-delay : 0.69s;
  136. -moz-animation-delay : 0.69s;
  137. -o-animation-delay : 0.69s;
  138. animation-delay : 0.69s;
  139. -webkit-animation-duration : 0.92s;
  140. -moz-animation-duration : 0.92s;
  141. -o-animation-duration : 0.92s;
  142. animation-duration : 0.92s;
  143. }
  144. .ball-grid-pulse > div:nth-child(8) {
  145. -webkit-animation-delay : 0.78s;
  146. -moz-animation-delay : 0.78s;
  147. -o-animation-delay : 0.78s;
  148. animation-delay : 0.78s;
  149. -webkit-animation-duration : 1.15s;
  150. -moz-animation-duration : 1.15s;
  151. -o-animation-duration : 1.15s;
  152. animation-duration : 1.15s;
  153. }
  154. .ball-grid-pulse > div:nth-child(9) {
  155. -webkit-animation-delay : -0.17s;
  156. -moz-animation-delay : -0.17s;
  157. -o-animation-delay : -0.17s;
  158. animation-delay : -0.17s;
  159. -webkit-animation-duration : 0.91s;
  160. -moz-animation-duration : 0.91s;
  161. -o-animation-duration : 0.91s;
  162. animation-duration : 0.91s;
  163. }
  164. .ball-grid-pulse > div {
  165. background-color : #55595C;
  166. width : 15px;
  167. height : 15px;
  168. border-radius : 100%;
  169. margin : 2px;
  170. -webkit-animation-fill-mode : both;
  171. -moz-animation-fill-mode : both;
  172. -o-animation-fill-mode : both;
  173. animation-fill-mode : both;
  174. display : inline-block;
  175. float : right;
  176. -webkit-animation-name : ball-grid-pulse;
  177. -moz-animation-name : ball-grid-pulse;
  178. -o-animation-name : ball-grid-pulse;
  179. animation-name : ball-grid-pulse;
  180. -webkit-animation-iteration-count : infinite;
  181. -moz-animation-iteration-count : infinite;
  182. -o-animation-iteration-count : infinite;
  183. animation-iteration-count : infinite;
  184. -webkit-animation-delay : 0;
  185. -moz-animation-delay : 0;
  186. -o-animation-delay : 0;
  187. animation-delay : 0;
  188. }