ball-clip-rotate-multiple.css 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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-multiple {
  27. position: relative;
  28. }
  29. .ball-clip-rotate-multiple > div {
  30. -webkit-animation-fill-mode: both;
  31. animation-fill-mode: both;
  32. position: absolute;
  33. left: -20px;
  34. top: -20px;
  35. border: 2px solid #b8c2cc;
  36. border-bottom-color: transparent;
  37. border-top-color: transparent;
  38. border-radius: 100%;
  39. height: 35px;
  40. width: 35px;
  41. -webkit-animation: rotate 1s 0s ease-in-out infinite;
  42. animation: rotate 1s 0s ease-in-out infinite;
  43. }
  44. .ball-clip-rotate-multiple > div:last-child {
  45. display: inline-block;
  46. top: -10px;
  47. left: -10px;
  48. width: 15px;
  49. height: 15px;
  50. -webkit-animation-duration: 0.5s;
  51. animation-duration: 0.5s;
  52. border-color: #b8c2cc transparent #b8c2cc transparent;
  53. animation-direction: reverse;
  54. }