Question

所以，我的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返回其原始位置？

Answer 1

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

来自Mozilla开发者网络：

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

Demo

Answer 2

我不建议将@keyframes用于这个简单的动画。

这篇文章可以帮到你

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

结论你有它 - 坦率地看看过渡的原因   和动画类似，但非常不同。我的一般方法   确定何时使用，如下所示：

如果我想要的话需要多个人提供的灵活性   关键帧和简单的循环，然后我去动画。如果我是   寻找一个简单的从/到动画，我进行过渡。如果我   想要操纵我希望使用动画制作的属性值   JavaScript，我进行过渡。

因为表现是有价值的。

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

2 个答案: