Safari中的CSS動畫延遲錯誤

Question

我最近遇到了Safari瀏覽器在CSS動畫方面的一些奇怪行爲，並且在操縱DOM時未能更新元素位置。我已經採取了一些GIF來說明這一點：

在Chrome（http://recordit.co/cCim1IwyMc）中，當DOM中更新了animation-delay時，瀏覽器將按照您的預期更新元素的動畫位置。

在Safari（http://recordit.co/3DRmEdo0FC）中，當DOM中更新了animation-delay時，瀏覽器無法更新元素的動畫位置。

這對我來說似乎是一個迴流/重繪問題。我還注意到，當您將鼠標懸停在Safari的檢查器中的動畫元素上時，藍色疊加層也無法跟上動畫。

下面是代碼：http://codepen.io/jabes/pen/pNgRrg

Answer 1

我最近碰到關於Safari和CSS3動畫類似的問題迷迷糊糊，似乎Safari一直定義使用速記模式的動畫時覆蓋單個動畫屬性的問題。在我的情況下，它是動畫播放狀態，Safari瀏覽器無法更改，所以我必須立即應用整個動畫字符串，而不是簡單地設置動畫播放狀態：正在運行。

嘗試：

.animator { 
    width: calc(100% - 100px); 
    animation: slide 50s linear 1s forwards; /* animation-delay 1s */ 
} 

延遲進入計時功能之後。