ball-pulse.css 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. @-webkit-keyframes scale {
  2. 0% {
  3. -webkit-transform : scale(1);
  4. transform : scale(1);
  5. opacity : 1;
  6. }
  7. 45% {
  8. -webkit-transform : scale(0.1);
  9. transform : scale(0.1);
  10. opacity : 0.7;
  11. }
  12. 80% {
  13. -webkit-transform : scale(1);
  14. transform : scale(1);
  15. opacity : 1;
  16. }
  17. }
  18. @-moz-keyframes scale {
  19. 0% {
  20. -moz-transform : scale(1);
  21. transform : scale(1);
  22. opacity : 1;
  23. }
  24. 45% {
  25. -moz-transform : scale(0.1);
  26. transform : scale(0.1);
  27. opacity : 0.7;
  28. }
  29. 80% {
  30. -moz-transform : scale(1);
  31. transform : scale(1);
  32. opacity : 1;
  33. }
  34. }
  35. @-o-keyframes scale {
  36. 0% {
  37. -o-transform : scale(1);
  38. transform : scale(1);
  39. opacity : 1;
  40. }
  41. 45% {
  42. -o-transform : scale(0.1);
  43. transform : scale(0.1);
  44. opacity : 0.7;
  45. }
  46. 80% {
  47. -o-transform : scale(1);
  48. transform : scale(1);
  49. opacity : 1;
  50. }
  51. }
  52. @keyframes scale {
  53. 0% {
  54. -webkit-transform : scale(1);
  55. -moz-transform : scale(1);
  56. -o-transform : scale(1);
  57. transform : scale(1);
  58. opacity : 1;
  59. }
  60. 45% {
  61. -webkit-transform : scale(0.1);
  62. -moz-transform : scale(0.1);
  63. -o-transform : scale(0.1);
  64. transform : scale(0.1);
  65. opacity : 0.7;
  66. }
  67. 80% {
  68. -webkit-transform : scale(1);
  69. -moz-transform : scale(1);
  70. -o-transform : scale(1);
  71. transform : scale(1);
  72. opacity : 1;
  73. }
  74. }
  75. .ball-pulse > div:nth-child(1) {
  76. -webkit-animation : scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  77. -moz-animation : scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  78. -o-animation : scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  79. animation : scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  80. }
  81. .ball-pulse > div:nth-child(2) {
  82. -webkit-animation : scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  83. -moz-animation : scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  84. -o-animation : scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  85. animation : scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  86. }
  87. .ball-pulse > div:nth-child(3) {
  88. -webkit-animation : scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  89. -moz-animation : scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  90. -o-animation : scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  91. animation : scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  92. }
  93. .ball-pulse > div {
  94. background-color : #55595C;
  95. width : 15px;
  96. height : 15px;
  97. border-radius : 100%;
  98. margin : 2px;
  99. -webkit-animation-fill-mode : both;
  100. -moz-animation-fill-mode : both;
  101. -o-animation-fill-mode : both;
  102. animation-fill-mode : both;
  103. display : inline-block;
  104. }