如何停止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，那麼在執行動畫之後，最後一個關鍵幀的樣式將應用於目標。