avoiding slow motion when using css keyframes - html

Question

I'm trying to achieve this button animation on hover using only CSS solution :
I've succeed on find a way doing this with css keyframe , but now i'm facing some an unexpected slow motion effect, for now I'm only experimenting this with the top left corner here is what I've done so far :
HTML
<div class="borderTop"></div>
CSS
a {
width: 150px;
height: 50px;
border: 2px solid;
margin: 0 auto;
margin-top: 20%;
display: block;
}
a:hover .borderTop {
width: 10px;
height: 2px;
border-top: 2px solid;
position: relative;
top: -2px;
-webkit-animation: topTheleft 2s alternate;
animation: topTheleft 2s alternate;
}
.borderTop {
width: 10px;
height: 2px;
border-top: 2px solid;
position: relative;
top: -2px;
left: 50px;
}
#-webkit-keyframes topTheleft {
0% { left: -2px; }
50% { left: -30px; }
100% { left: -70px; display: none; }
}
#-o-keyframes topTheleft {
0% { left: -2px; }
50% { left: -30px; }
100% { left: -70px; display: none; }
}
#-moz-keyframes topTheleft {
0% { left: -2px; }
50% { left: -30px; }
100% { left: -70px; display: none; }
}
#keyframes topTheleft {
0% { left: -2px; }
50% { left: -30px; }
100% { left: -70px; display: none; }
}
LIVE DEMO
any help on how to avoid this slow motion on the middle of the animation would be highly appreciated , thank you in advance
edit, is there a way to make the line hide when reach the left: -70px with a transition effect not ansta-hide, any other solution to do it are welcome too

Answer 1

Try getting rid of the 50% lines:
#-webkit-keyframes topTheleft {
0% { left: -2px; }
100% { left: -70px; display: none; }
}
#-o-keyframes topTheleft {
0% { left: -2px; }
100% { left: -70px; display: none; }
}
#-moz-keyframes topTheleft {
0% { left: -2px; }
100% { left: -70px; display: none; }
}
#keyframes topTheleft {
0% { left: -2px; }
100% { left: -70px; display: none; }
}

Answer 2

It looks like the default timing function is ease-in-out : from one animation step to the other, the speed goes slow-fast-slow, to make it look more natural (real physics cannot make an object got from speed 0 to 100 instantaneously).
So what happens is the animation starts slow at 0%, goes fast, then slows down for the 50% step, then accelerates again
Is this what you are looking for ?
https://jsfiddle.net/kvyqyg19/1/
a:hover .borderTop {
/* .. */
-webkit-animation: topTheleft 2s alternate;
animation: topTheleft 2s alternate;
animation-timing-function: linear;
}
#-webkit-keyframes topTheleft {
0% { left: -2px; }
100% { left: -70px; display: none; }
}
/* .. */
I removed the middle (50%) step and set the animation-timing-function: linear;