Question 45103 in Html Question posted in
Some basic documentation can be found here.

Run animation scale and infinity rotate at the same time on Hover – Html

I’ve been trying to create an animation where a link will have a scaled background colour and an infinite rotating animation when hovered over it. I’ve tried to combine the two animations, but for some reason, it doesn’t work. Here’s the code I’ve tried to reproduce. Can someone tell me how to achieve the desired animation?

Desired effect:

On hover, instantly show the after pseudo-element with a scale effect, and at the same time, keep the border rotating on itself.

body{
 background:black;
 display:flex;
 justify-content:center;
 align-items:center;
 width:100%;
 height:100vh
}
.full-rounded-link {
    position: relative;
    border: 1px solid;
    border-radius: 50%;
    height:60px;
    width:60px;
    display: flex;
    text-align: center;
    align-items: center;
    background: #191F2A;
    border-color: #191F2A;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    transition: transform 0.3s ease-in-out;

}
.full-rounded-link a {
 color:white
}
.full-rounded-link::before {
    content: "";
    background: red;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    transform: scale(0);
    z-index: -1;
    border: 1px dashed #fff;
}
.full-rounded-link:hover::before { 
  animation: spin 10s linear infinite , dance 0.5s ease ;
}
.full-rounded-link:not(:hover)::before {
  animation: scale-down 0.5s ease-in-out forwards;
}

@keyframes scale-down {
  0% {
transform: scale(1);
  }
  100% {
transform: scale(0);
  }
}
@keyframes dance {
 0% {
  transform: scale(0) rotate(360deg);
 }
 100% {
  transform: scale(1) rotate(-360deg);
 }
}
@keyframes spin {
  0% {
   transform: rotate(-360deg);
  }
  100% {
   transform: rotate(360deg);
  }
 }
<div class="full-rounded-link">
        <a  href="/my-link">
          a link
        </a>
      </div>
Tags:

2

Answers


  1. 0 
    i am try this code and it works . why you comment the animation !

 .full-rounded-link:hover::before,.full-rounded-link:hover:before {
 transform: scale(1) ;
 animation: spin 10s linear infinite;
 }
 
 @keyframes spin { 
  0% {
 -webkit-transform: scale(0) rotate(180deg);
 }
 100% {
 -webkit-transform: scale(1) rotate(-180deg);
 }
 }
    Login or Signup to reply.
  2. 0 
    .full-rounded-link:hover::before {
 transform: scale(1);
 animation: spin 10s linear infinite, dance 2s linear;
}

@keyframes spin {
 0% {
  transform: rotate(360deg);
 }
 100% {
  transform: rotate(-360deg);
 }
}

@keyframes dance {
 0% {
  transform: scale(0) rotate(360deg);
 }
 100% {
  transform: scale(1) rotate(-360deg);
 }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search