I've been experimenting with an animation that involves a link with a scaled background color and continuous rotation effect when hovered. I've attempted to merge the two animations, but unfortunately, it's not working as expected. Below is the code snippet I used. Any suggestions on how to achieve the desired animation?
Desired Outcome:
Upon hovering, I want the after pseudo-element to instantly display with a scaling effect, while simultaneously keeping the border rotating continuously.
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>