如何防止 CSS 动画回到原来的位置？答案

【问题标题】：How to prevent a CSS animation from going back to its original position?如何防止 CSS 动画回到原来的位置？
【发布时间】：2017-08-21 04:39:29
【问题描述】：

所以，我的 CSS 在 3 秒后将 div 移动到 -40px。这样做之后，div 会被移回原来的位置。代码如下：

#jsAlert {
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.6);
    animation:mymove 3s;
    animation-delay: 3s;

    /*Safari and Chrome*/
    -webkit-animation: mymove 2s;
    -webkit-animation-delay: 2s;
}

@keyframes mymove {
    from {top: 0px;}
    to {top: -40px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
    from {top: 0px;}
    to {top: -40px;}
}

如何防止 div 返回到原来的位置？

【问题讨论】：

标签： html css css-animations

【解决方案1】：

您需要使用animation-fill-mode 并将值设置为forwards

来自 Mozilla 开发者网络：

目标将保留最后一个关键帧设置的计算值执行过程中遇到。遇到的最后一个关键帧取决于 animation-direction 和 animation-iteration-count 的值

Demo

【讨论】：

【解决方案2】：

我不建议在这个简单的动画中使用@keyframes。

这篇文章可能对你有所帮助

http://www.kirupa.com/html5/css3_animations_vs_transitions.htm

结论你知道了 - 坦率地看看是什么造成了过渡和动画相似但非常不同。我的一般方法确定何时使用如下：

如果我想要的需要拥有多个关键帧和简单的循环，然后我去动画。如果我是寻找一个简单的从/到动画，我去过渡。如果我想要操纵我希望使用动画的属性值 JavaScript，我使用过渡。

因为性能是很有价值的东西。

【讨论】：