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

【问题标题】：avoiding slow motion when using css keyframes使用 css 关键帧时避免慢动作
【发布时间】：2015-02-18 18:57:49
【问题描述】：

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

我已经成功找到了一种使用 css keyframe 的方法，但现在我面临一些意想不到的慢动作效果，现在我只是在左上角进行实验，这就是我所做的到目前为止：

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，也欢迎任何其他解决方案

【问题讨论】：

标签： html css css-animations keyframe

【解决方案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;  }
}

【讨论】：

谢谢你，这解决了第一个问题:) 有没有办法让线在到达左边时隐藏：-70px，过渡效果不是 ansta-hide ？
我认为你能做的最好的就是把 50% { left: -70px; } 在您的关键帧中。所以你有两个动画：从 A 移动到 B，稍后停止并消失。
谢谢 :)

【解决方案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;

【讨论】：