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

Question

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>

Could you please provide more info on what is the desired result? Because if you will uncomment this line: /*animation: spin 10s linear infinite;*/, looks like it is rotating and growing, so can't understand what is exactly not working. — hrystynaKb, Feb 20 '23 at 12:02
in your keyframe change this @keyframes spin { 0% { -webkit-transform: rotate(360deg); } 100% { -webkit-transform: rotate(-360deg); } — Nisha, Feb 20 '23 at 12:03
both animation are working hover your link and see red color take some time then it will show because scale is 0 to 1 and time is 10s — Nisha, Feb 20 '23 at 12:08

medelito · Accepted Answer · 2023-02-20T13:10:52.153

1

.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);
 }
}

edited Feb 20 '23 at 13:10

answered Feb 20 '23 at 12:10

medelito

247
9

this is partialy work thanks , could you please comment why ? thanks – Taha Azzabi Feb 20 '23 at 12:45
1

first i separated the animation because i assumed you wanted the circle to fill in red and then start spinning, i also removed infinite from the second animation because i wanted it to stay in red instead of repeating over & over – medelito Feb 20 '23 at 12:51
thanks, I updated the code from your example, but I'm still having a little issue. I want to start the spin animation immediately on hover, and could you see why I lose the dance animation when the cursor is out? – Taha Azzabi Feb 20 '23 at 12:57
1

Try the updated code. Since the animation runs on hover, once the cursor is out, the animation ends – medelito Feb 20 '23 at 13:11
is that possible when the animation dance ends have the same effect scale down as when the cursor is hover it thanks – Taha Azzabi Feb 20 '23 at 13:22
Check [this](https://stackoverflow.com/questions/17100235/make-css-hover-state-remain-after-unhovering) – medelito Feb 20 '23 at 13:29

score 0 · Answer 2 · answered Feb 20 '23 at 12:04

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);
 }
 }

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

2 Answers2