停止CSS3關鍵幀動畫

Question

我有動畫一個div作爲

div{ 
    animation-name:moveit; 
    animation-duration:2s; 
} 

@keyframes moveit{ 
    0%{ 
    top:0; 
    } 
    100%{ 
    top:400px; 
    } 
} 

這部動畫在2sec從移動到top 0px一個top=400px DIV。

現在的問題是，當動畫結束時，它會回到top=0 ...我希望當動畫結束時，它應該保持在top=400px;

它亙古不變的重複，但還是回到原來的位置，但我希望它留在100％

Answer 1

要堅持，你可以給你的div元素的初始頂級物業動畫的最終狀態。

div { 
    top: 400px; 
    animation-name: moveit; 
    animation-duration: 2s; 
} 

@keyframes moveit { 
    0% { top: 0px; } 
    100% { top: 400px; } 
} 

當動畫結束時，頂級屬性爲您的div將接管，你應該有你想要的效果。