@keyframes rotate { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(0.6); } 100% { transform: rotate(360deg) scale(1); } } .ball-clip-rotate-multiple { position: relative; } .ball-clip-rotate-multiple > div { animation-fill-mode: both; position: absolute; left: -20px; top: -20px; border: 2px solid #6B6F82; border-bottom-color: transparent; border-top-color: transparent; border-radius: 100%; height: 35px; width: 35px; animation: rotate 1s 0s ease-in-out infinite; } .ball-clip-rotate-multiple > div:last-child { display: inline-block; top: -10px; left: -10px; width: 15px; height: 15px; animation-duration: 0.5s; border-color: #6B6F82 transparent #6B6F82 transparent; animation-direction: reverse; }