Link hover animation issue(knight rider animation)

I have created animation that runs hover the link.

I have created animation using in and out key frames.

But I got issue. I think this happens because of knight-rider-out animation. But I need that for mouse leave.

The issue is when the page load it is running automatically. Code pen link

.container {
padding: 50px;
max-width: 500px;
}

.dashBottom {
padding-left: 0px;
position: relative;
padding-bottom: 15px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
color: black;
text-decoration: none;
}
.dashBottom:after {
position: absolute;
content: "";
bottom: 0px;
width: 30px;
background-color: black;
height: 4px;
left: 0;
right: auto;
-webkit-animation: knight-rider-out 0.5s;
animation: knight-rider-out 0.5s;
animation-fill-mode: forwards;
}
.dashBottom:hover:after {
-webkit-animation: knight-rider-in 0.5s;
animation: knight-rider-in 0.5s;
animation-fill-mode: forwards;
}

@keyframes knight-rider-in {
from {
left: 0px;
width: 30px;
}
50% {
left: 0px;
width: 100%;
}
to {
left: calc( 100% - 30px);
width: 30px;
}
}
@keyframes knight-rider-out {
from {
left: calc( 100% - 30px);
width: 30px;
}
50% {
left: 0px;
width: 100%;
}
to {
left: 0px;
width: 30px;
}
}


View More


@Temin thanks for your feed back. I have added it. But i want same effect on mouse leave.
– Sameera Liyanage
Jun 29 at 9:18

you mean a permanent effect? like this : jsfiddle.net/n7a6vumc ?
– Temani Afif
Jun 29 at 9:19

I simply want mouse over effect that looks like that looks like Knight rider wave. Can you help me.
– Sameera Liyanage
Jun 29 at 9:23

you mean you want the animation reverse to happen on mous leave?
– Temani Afif
Jun 29 at 9:25

Yes thats what i want.
– Sameera Liyanage
Jun 29 at 9:27

1 Answer
1

To avoid this you can consider transition. Here is another way to achieve the same effect with less of code:

.container {
padding: 50px;
max-width: 500px;
}

.dashBottom {
padding-left: 0px;
position: relative;
padding-bottom: 15px;
transition: all 0.3s;
color: black;
text-decoration: none;
background-image:linear-gradient(#000,#000);
background-size: 200% 4px;
background-position: calc(200% + 30px) 100%;
background-repeat:no-repeat;
transition:0.5s all;
}

.dashBottom:hover {
background-position:calc(-100% - 30px) 100%;
}


View More


But i need the black line width to fix value (exact 30px).
– Sameera Liyanage
Jun 29 at 10:04

@SameeraLiyanage ok will edit ;)
– Temani Afif
Jun 29 at 10:09

@SameeraLiyanage check the update
– Temani Afif
Jun 29 at 10:21

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.