css3動畫：如何播放css3動畫並保持最後一幀顯示？

Question

我想滑落一個div元素。 所以我只是用：

$("#myBox").addClass("moveDown"); 

---

.moveDown { 
    animation:mymove 1s ease-out forwards; 
    -webkit-animation:mymove 1s ease-out infinite; 
} 
@keyframes mymove { 
    from {top:0px; opacity: 0;} 
    to {top:100px; opacity: 1} 
} 

@-webkit-keyframes mymove { 
    from {top:0px; opacity: 0;} 
    to {top:100px; opacity: 1;} 
} 

工作正常：我的箱子順利100px的移到底部，但在動畫結束時，跳轉到初始位置：如何實現的任何想法， ？

我不想使用jquery的動畫函數，因爲它不夠平滑與jQuery。

Answer 1

一個簡單的方法是使用CSS轉換，而不是CSS動畫：

#myBox { 
    top: 0; 
    opacity: 0; 
    transition: all 1s; 
} 
#myBox.moveDown { 
    top: 100px; 
    opacity: 1; 
} 

作品與你寫相同的jQuery。

Answer 2

爲了保住最後的關鍵幀將需要添加以下幾行你.movedown類

-webkit-animation-fill-mode: forwards 
animation-fill-mode: forwards 
-moz-animation-fill-mode: forwards 
-ms-animation-fill-mode: forwards 

例如

.moveDown { 
animation:mymove 1s ease-out forwards; 
-webkit-animation:mymove 1s ease-out infinite; 
-webkit-animation-fill-mode: forwards 
animation-fill-mode: forwards 
-moz-animation-fill-mode: forwards 
-ms-animation-fill-mode: forwards