Aqui tem um exemplo. O ponto principal é animar um pseudo-elemento no :hover
da div
pai. Assim vc evita de rodar diretamente o pai e por seguinte o filho também. Além disso no interection-count
do animation
vc coloca o valor de 3
para girar apenas 3x e depois parar. Para dar o aspecto de spin de load basta vc colocar uma das bordas com a cor transparente, eu usei border-bottom-color: transparent;
para dar esse efeito.
Segue o código da imagem acima.
.icon {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 48px;
height: 48px;
}
.icon::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
border: 5px solid #000;
border-radius: 50%;
}
.icon:hover::after {
/* border-bottom-color: transparent; */
animation: gira 500ms linear;
animation-iteration-count: 3;
}
@keyframes gira {
0% {
transform: rotate(0deg);
border-bottom-color: transparent;
}
99% {
border-bottom-color: transparent;
transform: rotate(360deg);
}
100% {
border-bottom-color: #000;
transform: rotate(360deg);
}
}
<div class="icon">
<img src="https://placecage.com/24/24">
</div>