有沒有辦法使用過渡從CSS動畫的結束狀態過渡？

Question

我理解並同時使用了轉場和動畫，但是在我看來，嘗試結合它們時會有些“困難”。 例如，如果您有一個以某種顏色結尾的動畫樣式，並使用-webkit-animation-fill-mode: forwards;無限期設置了該值-webkit-animation-fill-mode: forwards; 如果可以設置一種替代樣式，那么從這種狀態平穩過渡到另一種狀態將很有意義。

參見jsfiddle 。 請注意，切換黃色樣式可以平滑地使用過渡，但是使用動畫只能使動畫過程中的初始0-50％平滑。 沒有方法可以將最終的綠色狀態恢復為純白色或黃色背景，而不會在未設置動畫值時發生突然的即時變化。 還要注意，動畫在激活時會完全覆蓋!important樣式。

我不知道在spec / WD / etc。中指定了多少這種行為，但是據我所知，這種限制行為使CSS動畫幾乎一文不值，建議執行該步驟從javascript明智地，用於過渡。 這樣做的缺點是這樣做會大大增加開銷。

為了解決“不清楚我要問的問題”的投票，我要問的是如何制作可以插值回到最終動畫狀態之外的動畫？

Answer 1

是的，但是您是否嘗試在animation-direction屬性中使用reverse值？