ball-beat.css 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. @-webkit-keyframes ball-beat {
  2. 50% {
  3. opacity : 0.2;
  4. -webkit-transform : scale(0.75);
  5. transform : scale(0.75);
  6. }
  7. 100% {
  8. opacity : 1;
  9. -webkit-transform : scale(1);
  10. transform : scale(1);
  11. }
  12. }
  13. @-moz-keyframes ball-beat {
  14. 50% {
  15. opacity : 0.2;
  16. -moz-transform : scale(0.75);
  17. transform : scale(0.75);
  18. }
  19. 100% {
  20. opacity : 1;
  21. -moz-transform : scale(1);
  22. transform : scale(1);
  23. }
  24. }
  25. @-o-keyframes ball-beat {
  26. 50% {
  27. opacity : 0.2;
  28. -o-transform : scale(0.75);
  29. transform : scale(0.75);
  30. }
  31. 100% {
  32. opacity : 1;
  33. -o-transform : scale(1);
  34. transform : scale(1);
  35. }
  36. }
  37. @keyframes ball-beat {
  38. 50% {
  39. opacity : 0.2;
  40. -webkit-transform : scale(0.75);
  41. -moz-transform : scale(0.75);
  42. -o-transform : scale(0.75);
  43. transform : scale(0.75);
  44. }
  45. 100% {
  46. opacity : 1;
  47. -webkit-transform : scale(1);
  48. -moz-transform : scale(1);
  49. -o-transform : scale(1);
  50. transform : scale(1);
  51. }
  52. }
  53. .ball-beat > div {
  54. background-color : #55595C;
  55. width : 15px;
  56. height : 15px;
  57. border-radius : 100%;
  58. margin : 2px;
  59. -webkit-animation-fill-mode : both;
  60. -moz-animation-fill-mode : both;
  61. -o-animation-fill-mode : both;
  62. animation-fill-mode : both;
  63. display : inline-block;
  64. -webkit-animation : ball-beat 0.7s 0s infinite linear;
  65. -moz-animation : ball-beat 0.7s 0s infinite linear;
  66. -o-animation : ball-beat 0.7s 0s infinite linear;
  67. animation : ball-beat 0.7s 0s infinite linear;
  68. }
  69. .ball-beat > div:nth-child(2n-1) {
  70. -webkit-animation-delay : -0.35s !important;
  71. -moz-animation-delay : -0.35s !important;
  72. -o-animation-delay : -0.35s !important;
  73. animation-delay : -0.35s !important;
  74. }