ball-rotate.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. @-webkit-keyframes rotate {
  2. 0% {
  3. -webkit-transform : rotate(0deg);
  4. transform : rotate(0deg);
  5. }
  6. 50% {
  7. -webkit-transform : rotate(-180deg);
  8. transform : rotate(-180deg);
  9. }
  10. 100% {
  11. -webkit-transform : rotate(-360deg);
  12. transform : rotate(-360deg);
  13. }
  14. }
  15. @-moz-keyframes rotate {
  16. 0% {
  17. -moz-transform : rotate(0deg);
  18. transform : rotate(0deg);
  19. }
  20. 50% {
  21. -moz-transform : rotate(-180deg);
  22. transform : rotate(-180deg);
  23. }
  24. 100% {
  25. -moz-transform : rotate(-360deg);
  26. transform : rotate(-360deg);
  27. }
  28. }
  29. @-o-keyframes rotate {
  30. 0% {
  31. -o-transform : rotate(0deg);
  32. transform : rotate(0deg);
  33. }
  34. 50% {
  35. -o-transform : rotate(-180deg);
  36. transform : rotate(-180deg);
  37. }
  38. 100% {
  39. -o-transform : rotate(-360deg);
  40. transform : rotate(-360deg);
  41. }
  42. }
  43. @keyframes rotate {
  44. 0% {
  45. -webkit-transform : rotate(0deg);
  46. -moz-transform : rotate(0deg);
  47. -o-transform : rotate(0deg);
  48. transform : rotate(0deg);
  49. }
  50. 50% {
  51. -webkit-transform : rotate(-180deg);
  52. -moz-transform : rotate(-180deg);
  53. -o-transform : rotate(-180deg);
  54. transform : rotate(-180deg);
  55. }
  56. 100% {
  57. -webkit-transform : rotate(-360deg);
  58. -moz-transform : rotate(-360deg);
  59. -o-transform : rotate(-360deg);
  60. transform : rotate(-360deg);
  61. }
  62. }
  63. .ball-rotate {
  64. position : relative;
  65. }
  66. .ball-rotate > div {
  67. background-color : #55595C;
  68. width : 15px;
  69. height : 15px;
  70. border-radius : 100%;
  71. margin : 2px;
  72. -webkit-animation-fill-mode : both;
  73. -moz-animation-fill-mode : both;
  74. -o-animation-fill-mode : both;
  75. animation-fill-mode : both;
  76. position : relative;
  77. }
  78. .ball-rotate > div:first-child {
  79. -webkit-animation : rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
  80. -moz-animation : rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
  81. -o-animation : rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
  82. animation : rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite;
  83. }
  84. .ball-rotate > div:before, .ball-rotate > div:after {
  85. background-color : #55595C;
  86. width : 15px;
  87. height : 15px;
  88. border-radius : 100%;
  89. margin : 2px;
  90. content : '';
  91. position : absolute;
  92. opacity : 0.8;
  93. }
  94. .ball-rotate > div:before {
  95. top : 0;
  96. right : -28px;
  97. }
  98. .ball-rotate > div:after {
  99. top : 0;
  100. right : 25px;
  101. }