ball-rotate.css 866 B

1234567891011121314151617181920212223242526272829303132333435
  1. @keyframes rotate {
  2. 0% {
  3. transform: rotate(0deg); }
  4. 50% {
  5. transform: rotate(180deg); }
  6. 100% {
  7. transform: rotate(360deg); } }
  8. .ball-rotate {
  9. position: relative; }
  10. .ball-rotate > div {
  11. background-color: #55595c;
  12. width: 15px;
  13. height: 15px;
  14. border-radius: 100%;
  15. margin: 2px;
  16. animation-fill-mode: both;
  17. position: relative; }
  18. .ball-rotate > div:first-child {
  19. animation: rotate 1s 0s cubic-bezier(0.7, -0.13, 0.22, 0.86) infinite; }
  20. .ball-rotate > div:before, .ball-rotate > div:after {
  21. background-color: #55595c;
  22. width: 15px;
  23. height: 15px;
  24. border-radius: 100%;
  25. margin: 2px;
  26. content: "";
  27. position: absolute;
  28. opacity: 0.8; }
  29. .ball-rotate > div:before {
  30. top: 0px;
  31. left: -28px; }
  32. .ball-rotate > div:after {
  33. top: 0px;
  34. left: 25px; }