ball-clip-rotate-pulse.css 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. @-webkit-keyframes rotate {
  2. 0% {
  3. -webkit-transform : rotate(0deg) scale(1);
  4. transform : rotate(0deg) scale(1);
  5. }
  6. 50% {
  7. -webkit-transform : rotate(-180deg) scale(0.6);
  8. transform : rotate(-180deg) scale(0.6);
  9. }
  10. 100% {
  11. -webkit-transform : rotate(-360deg) scale(1);
  12. transform : rotate(-360deg) scale(1);
  13. }
  14. }
  15. @-moz-keyframes rotate {
  16. 0% {
  17. -moz-transform : rotate(0deg) scale(1);
  18. transform : rotate(0deg) scale(1);
  19. }
  20. 50% {
  21. -moz-transform : rotate(-180deg) scale(0.6);
  22. transform : rotate(-180deg) scale(0.6);
  23. }
  24. 100% {
  25. -moz-transform : rotate(-360deg) scale(1);
  26. transform : rotate(-360deg) scale(1);
  27. }
  28. }
  29. @-o-keyframes rotate {
  30. 0% {
  31. -o-transform : rotate(0deg) scale(1);
  32. transform : rotate(0deg) scale(1);
  33. }
  34. 50% {
  35. -o-transform : rotate(-180deg) scale(0.6);
  36. transform : rotate(-180deg) scale(0.6);
  37. }
  38. 100% {
  39. -o-transform : rotate(-360deg) scale(1);
  40. transform : rotate(-360deg) scale(1);
  41. }
  42. }
  43. @keyframes rotate {
  44. 0% {
  45. -webkit-transform : rotate(0deg) scale(1);
  46. -moz-transform : rotate(0deg) scale(1);
  47. -o-transform : rotate(0deg) scale(1);
  48. transform : rotate(0deg) scale(1);
  49. }
  50. 50% {
  51. -webkit-transform : rotate(-180deg) scale(0.6);
  52. -moz-transform : rotate(-180deg) scale(0.6);
  53. -o-transform : rotate(-180deg) scale(0.6);
  54. transform : rotate(-180deg) scale(0.6);
  55. }
  56. 100% {
  57. -webkit-transform : rotate(-360deg) scale(1);
  58. -moz-transform : rotate(-360deg) scale(1);
  59. -o-transform : rotate(-360deg) scale(1);
  60. transform : rotate(-360deg) scale(1);
  61. }
  62. }
  63. @-webkit-keyframes scale {
  64. 30% {
  65. -webkit-transform : scale(0.3);
  66. transform : scale(0.3);
  67. }
  68. 100% {
  69. -webkit-transform : scale(1);
  70. transform : scale(1);
  71. }
  72. }
  73. @-moz-keyframes scale {
  74. 30% {
  75. -moz-transform : scale(0.3);
  76. transform : scale(0.3);
  77. }
  78. 100% {
  79. -moz-transform : scale(1);
  80. transform : scale(1);
  81. }
  82. }
  83. @-o-keyframes scale {
  84. 30% {
  85. -o-transform : scale(0.3);
  86. transform : scale(0.3);
  87. }
  88. 100% {
  89. -o-transform : scale(1);
  90. transform : scale(1);
  91. }
  92. }
  93. @keyframes scale {
  94. 30% {
  95. -webkit-transform : scale(0.3);
  96. -moz-transform : scale(0.3);
  97. -o-transform : scale(0.3);
  98. transform : scale(0.3);
  99. }
  100. 100% {
  101. -webkit-transform : scale(1);
  102. -moz-transform : scale(1);
  103. -o-transform : scale(1);
  104. transform : scale(1);
  105. }
  106. }
  107. .ball-clip-rotate-pulse {
  108. position : relative;
  109. -webkit-transform : translateY(-15px);
  110. -moz-transform : translateY(-15px);
  111. -ms-transform : translateY(-15px);
  112. -o-transform : translateY(-15px);
  113. transform : translateY(-15px);
  114. }
  115. .ball-clip-rotate-pulse > div {
  116. -webkit-animation-fill-mode : both;
  117. -moz-animation-fill-mode : both;
  118. -o-animation-fill-mode : both;
  119. animation-fill-mode : both;
  120. position : absolute;
  121. top : 0;
  122. right : 0;
  123. border-radius : 100%;
  124. }
  125. .ball-clip-rotate-pulse > div:first-child {
  126. background : #55595C;
  127. height : 16px;
  128. width : 16px;
  129. top : 7px;
  130. right : -7px;
  131. -webkit-animation : scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  132. -moz-animation : scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  133. -o-animation : scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  134. animation : scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  135. }
  136. .ball-clip-rotate-pulse > div:last-child {
  137. position : absolute;
  138. border : 2px solid #55595C;
  139. width : 30px;
  140. height : 30px;
  141. right : -16px;
  142. top : -2px;
  143. background : transparent;
  144. border : 2px solid;
  145. border-color : #55595C transparent #55595C transparent;
  146. -webkit-animation : rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  147. -moz-animation : rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  148. -o-animation : rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  149. animation : rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  150. -webkit-animation-duration : 1s;
  151. -moz-animation-duration : 1s;
  152. -o-animation-duration : 1s;
  153. animation-duration : 1s;
  154. }