Link hover animation issue(knight rider animation)

Question

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

<div class="container">
    <a class="viewMore dashBottom" href="#">View More</a>
</div>

@Temin thanks for your feed back. I have added it. But i want same effect on mouse leave. — Sameera Liyanage, Jun 29 '18 at 09:18
you mean a permanent effect? like this : https://jsfiddle.net/n7a6vumc/ ? — Temani Afif, Jun 29 '18 at 09:19
I simply want mouse over effect that looks like that looks like Knight rider wave. Can you help me. — Sameera Liyanage, Jun 29 '18 at 09:23
you mean you want the animation reverse to happen on mous leave? — Temani Afif, Jun 29 '18 at 09:25
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/174016/discussion-between-sameera-liyanage-and-temani-afif). — Sameera Liyanage, Jun 29 '18 at 09:34

Temani Afif · Accepted Answer · 2018-06-29T10:21:39.483

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

<div class="container">
    <a class="viewMore dashBottom" href="#">View More</a>
</div>

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

Link hover animation issue(knight rider animation)

1 Answers1