@keyframes rotate { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(0.6); } 100% { transform: rotate(360deg) scale(1); } } @keyframes scale { 30% { transform: scale(0.3); } 100% { transform: scale(1); } } .ball-clip-rotate-pulse { position: relative; transform: translateY(-15px); } .ball-clip-rotate-pulse > div { animation-fill-mode: both; position: absolute; top: 0px; left: 0px; border-radius: 100%; } .ball-clip-rotate-pulse > div:first-child { background: #6B6F82; height: 16px; width: 16px; top: 7px; left: -7px; animation: scale 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; } .ball-clip-rotate-pulse > div:last-child { position: absolute; border: 2px solid #6B6F82; width: 30px; height: 30px; left: -16px; top: -2px; background: transparent; border: 2px solid; border-color: #6B6F82 transparent #6B6F82 transparent; animation: rotate 1s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; animation-duration: 1s; }