使用css关键帧时避免慢动作

Question

我正在尝试使用CSS解决方案在悬停时实现此按钮动画：

我已经成功找到了一种用css关键帧做到这一点的方法，但现在我面临着一些意想不到的慢动作效果，现在我只是在左上角尝试这个就是我做过的事情到目前为止：

HTML

<a href=""><div class="borderTop"></div></a>

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

任何关于如何在动画中间避免这种慢动作的帮助都将受到高度赞赏，谢谢你提前

编辑，有没有办法让线条在到达left: -70px时隐藏，但过渡效果不是ansta-hide，任何其他解决方案都是受欢迎的

Answer 1

尝试摆脱50％的行：

@-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

看起来默认的计时功能是轻松进入：从一个动画步骤到另一个，速度变慢 - 快 - 慢，使其看起来更自然（真正的物理不能使物体从速度获得0到100瞬间）。

所以会发生什么呢？动画在0％开始变慢，变速，然后在50％步骤减速，然后再次加速

这是你在找什么？ 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; }
}
/* .. */ 

我删除了中间（50％）步骤并设置动画定时功能：线性;