使用 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

貌似默认的计时函数是ease-in-out：从一个动画步到另一个步，速度是慢-快-慢，让它看起来更自然（真实的物理不能让一个物体得到从速度 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%) 步骤并设置了 animation-timing-function: linear;

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

avoiding slow motion when using css keyframes

html

css

css-animations

keyframe