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, ou seja, 3 giros em 3 segundos (cada gira tem 1s e como são 3 giros totaliza 3 segundos, deixei comentários no código). Para dar o aspecto de spinspin de loadload 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 {
animation: gira 500ms1s linear; /* 1s é o tempo da animação de cada giro */
animation-iteration-count: 3; /* 3 é a quantidade de giros, 3 giros = 3 segundos */
}
@keyframes gira {
0% {
transform: rotate(0deg);
border-bottom-color: transparent;
}
100% {
border-bottom-color: transparent;
transform: rotate(360deg);
}
}
<div class="icon">
<img src="https://placecage.com/24/24">
</div>