跳到CSS動畫結束

Question

我已經實現了一個具有開始和結束狀態的CSS3動畫。一旦達到結束狀態，動畫停止並不重複。我需要做的是繞過整個動畫的「跳轉到結束」鏈接，但顯示最終狀態。是否有可能通過CSS3做到這一點。

這裏的動畫頁面：http://bit.ly/1csZq2d

謝謝！

Answer 1

使用JavaScript只切換容器上的類重寫以兩種方式動畫：

1. 覆蓋了獨立動畫具有相同的最終結果動畫，仍然設置結束狀態animation-fill-mode: forwards;： http://codepen.io/shshaw/pen/yzhLb

2. 切換animation: none和手動添加的樣式，這將是在動畫的結尾： http://codepen.io/shshaw/pen/Jpmkc

第一種方法可能是更容易管理，所以你只是一個只包含結束狀態編輯您的所有@keyframes在一個地方。它還具有加速動畫的好處，可以快速完成，但仍然可以相對順利地進行轉換。