如何停止css动画[重复]

Question

我想通过类似的方式向元素添加一个简单的关键帧动画：

.sw_intro{
    animation: introtop;
    animation-duration: 0.8s;
    animation-delay: 2s;
}

@keyframes introtop {
    from {margin-top: 0;}
    to {margin-top: 100vh;}
}

但我希望动画的结束是结束状态。所以，动画运行后，margin-top 应该是 100vh 而不是现在的 0vh。

因此我需要做什么？

谢谢！

Answer 1

将animation-fill-mode: forwards 添加到.sw_intro

MDNanimation-fill-mode 是一个 CSS 属性，用于指定动画在执行前后应如何将样式应用于其目标。

如果您设置值forwards，则在执行动画后，最后一个关键帧的样式将应用于目标。