ball-clip-rotate-pulse.css 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  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. @-webkit-keyframes scale {
  27. 30% {
  28. transform: scale(0.3);
  29. }
  30. 100% {
  31. transform: scale(1);
  32. }
  33. }
  34. @keyframes scale {
  35. 30% {
  36. transform: scale(0.3);
  37. }
  38. 100% {
  39. transform: scale(1);
  40. }
  41. }
  42. .ball-clip-rotate-pulse {
  43. position: relative;
  44. transform: translateY(-15px);
  45. }
  46. .ball-clip-rotate-pulse > div {
  47. -webkit-animation-fill-mode: both;
  48. animation-fill-mode: both;
  49. position: absolute;
  50. top: 0px;
  51. left: 0px;
  52. border-radius: 100%;
  53. }
  54. .ball-clip-rotate-pulse > div:first-child {
  55. background: #b8c2cc;
  56. height: 16px;
  57. width: 16px;
  58. top: 7px;
  59. left: -7px;
  60. -webkit-animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  61. animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  62. }
  63. .ball-clip-rotate-pulse > div:last-child {
  64. position: absolute;
  65. border: 2px solid #b8c2cc;
  66. width: 30px;
  67. height: 30px;
  68. left: -16px;
  69. top: -2px;
  70. background: transparent;
  71. border: 2px solid;
  72. border-color: #b8c2cc transparent #b8c2cc transparent;
  73. -webkit-animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  74. animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  75. -webkit-animation-duration: 1s;
  76. animation-duration: 1s;
  77. }