css關鍵幀動畫不會停在最後一幀

我有一個樹的29幀動畫增長，我希望它停止在最後一幀（當它完全長大。）我一直在尋找一個解決方案讓它在最後一幀停止，但似乎沒有任何影響。我可以讓它循環，或者只是重置到第一幀。css關鍵幀動畫不會停在最後一幀

有人可以向我解釋爲什麼這個動畫只是重置回第一幀？非常感謝！

下面是代碼我在此刻：

.tree-right { 
-webkit-animation: treeright 2.0s steps(29); 
-moz-animation: treeright 2.0s steps(29); 
-ms-animation: treeright 2.0s steps(29); 
-o-animation: treeright 2.0s steps(29); 
animation: treeright 2.0s steps(29); 
-webkit-animation-fill-mode:forwards; 
-moz-animation-fill-mode:forwards; 
animation-fill-mode:forwards; 
} 


@-webkit-keyframes treeright { 
from { background-position: 0px; } 
to { background-position: -5310px; } 

} 

@-moz-keyframes treeright { 
from { background-position: 0px; } 
to { background-position: -5310px; } 
} 

@-ms-keyframes treeright { 
from { background-position: 0px; } 
to { background-position: -5310px; } 
} 

@-o-keyframes treeright { 
from { background-position: 0px; } 
to { background-position: -5310px; } 
} 

@keyframes treeright { 
from { background-position: 0px; } 
to { background-position: -5310px; } 

}

來源

2013-06-25 James Barracca

您是否有我們可以查看的現場示例？如codepen或jsfiddle？如果我們看不到行爲，很難提供幫助。 – BJack

只是猜測，但嘗試移動'動畫填充模式：轉發;'到'動畫：treeright 2.0s步驟（29）轉發;'並看看是否有幫助。 –

沒有更多的信息它很難衡量其根源問題是什麼，但是你有沒有嘗試設置迭代限制爲1？

-webkit-animation-iteration-count: 1; 
     -moz-animation-iteration-count: 1; 
     -o-animation-iteration-count: 1; 
      animation-iteration-count: 1;

來源

2013-06-25 19:24:50 BJack

是的，我已經嘗試過了，它根本沒有影響 –