ball-clip-rotate-pulse.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. @keyframes rotate {
  2. 0% {
  3. transform: rotate(0deg) scale(1); }
  4. 50% {
  5. transform: rotate(180deg) scale(0.6); }
  6. 100% {
  7. transform: rotate(360deg) scale(1); } }
  8. @keyframes scale {
  9. 30% {
  10. transform: scale(0.3); }
  11. 100% {
  12. transform: scale(1); } }
  13. .ball-clip-rotate-pulse {
  14. position: relative;
  15. transform: translateY(-15px); }
  16. .ball-clip-rotate-pulse > div {
  17. animation-fill-mode: both;
  18. position: absolute;
  19. top: 0px;
  20. left: 0px;
  21. border-radius: 100%; }
  22. .ball-clip-rotate-pulse > div:first-child {
  23. background: #55595c;
  24. height: 16px;
  25. width: 16px;
  26. top: 7px;
  27. left: -7px;
  28. animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }
  29. .ball-clip-rotate-pulse > div:last-child {
  30. position: absolute;
  31. border: 2px solid #55595c;
  32. width: 30px;
  33. height: 30px;
  34. left: -16px;
  35. top: -2px;
  36. background: transparent;
  37. border: 2px solid;
  38. border-color: #55595c transparent #55595c transparent;
  39. animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  40. animation-duration: 1s; }