平滑結束從CSS動畫過渡觸發：hover

Question

我有一個想法爲無限循環嵌套CSS動畫，其中每個週期的持續時間是不同的質數，所以累積效果是一個不錯的非重複動畫（懸停在webkit瀏覽器的標誌上有一個想法：http://jsbin.com/usabop/2）

問題是，當懸停狀態結束時，所有內容都會立即跳回到原始狀態。

有沒有人有任何想法或建議，使這個更平滑的過渡？

Answer 1

不幸的是，隨着CSS動畫的工作方式，沒有簡單的方法來做到這一點。你可以使用animation-play-state屬性，但是當你不再徘徊時，它會簡單地凍結當前幀的動畫。

我的建議是使用JavaScript在懸停上添加一個類，然後觸發一個完整的動畫循環。