Skip to main content
inclui novas instruções
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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.

inserir a descrição da imagem aquiinserir a descrição da imagem aqui

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>

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.

inserir a descrição da imagem aqui

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 500ms linear;
  animation-iteration-count: 3;
}
@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>

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 spin de load basta vc colocar uma das bordas com a cor transparente, eu usei border-bottom-color: transparent; para dar esse efeito.

inserir a descrição da imagem aqui

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 1s 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>

removeu 141 caracteres do conteúdo
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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.

inserir a descrição da imagem aqui

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;transparent;
    transform: rotate(360deg);
  }
}

  
<div class="icon">
  <img src="https://placecage.com/24/24">
</div>

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.

inserir a descrição da imagem aqui

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>

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.

inserir a descrição da imagem aqui

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 500ms linear;
  animation-iteration-count: 3;
}
@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>

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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.

inserir a descrição da imagem aqui

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>