ball-clip-rotate.css 978 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. /*========================================================
  2. DARK LAYOUT
  3. =========================================================*/
  4. @-webkit-keyframes rotate {
  5. 0% {
  6. transform: rotate(0deg) scale(1);
  7. }
  8. 50% {
  9. transform: rotate(180deg) scale(0.6);
  10. }
  11. 100% {
  12. transform: rotate(360deg) scale(1);
  13. }
  14. }
  15. @keyframes rotate {
  16. 0% {
  17. transform: rotate(0deg) scale(1);
  18. }
  19. 50% {
  20. transform: rotate(180deg) scale(0.6);
  21. }
  22. 100% {
  23. transform: rotate(360deg) scale(1);
  24. }
  25. }
  26. .ball-clip-rotate > div {
  27. background-color: #b8c2cc;
  28. width: 15px;
  29. height: 15px;
  30. border-radius: 100%;
  31. margin: 2px;
  32. -webkit-animation-fill-mode: both;
  33. animation-fill-mode: both;
  34. border: 2px solid #b8c2cc;
  35. border-bottom-color: transparent;
  36. height: 25px;
  37. width: 25px;
  38. background: transparent !important;
  39. display: inline-block;
  40. -webkit-animation: rotate 0.75s 0s linear infinite;
  41. animation: rotate 0.75s 0s linear infinite;
  42. }