-webkit轉換打破背景動畫

Question

在試圖實踐我的轉換，我創建了一個簡單的動畫，使用絕對位置移動三個div並將其轉換爲每個位置以及位置。這只是工作如預期沒有任何瑕疵

但是，每當WebKit瀏覽器變換的div，的div不再保留自己的動畫到下一個顏色的能力，他們仍然是他們原來的顏色（大多數時候黑）

Here's a jsFiddle

我試圖通過提供一個默認的DIV背景顏色，通過應用變換什麼也沒做，並添加!important到新的背景顏色，但沒有修復工作修復解決方案。我知道正在達到關鍵幀，因爲元素仍然改變變換位置，但是新的背景顏色是不適用

它完美罰款的Firefox的最新版本，我（當註釋取出）

我有沒有看到錯誤？如果沒有，這有什麼解決辦法嗎？

Answer 1

看起來它試圖（通過left和top）動畫都transform和位置時的這個問題似乎是

嘗試使用剛剛transform，這裏有一個演示：http://jsfiddle.net/qA4V9/

注意：在translate()函數中的百分比指的是對象的寬度和高度，而不是像top和left那樣的容器，所以您必須重新考慮這些數字（我使用了像素）

好消息：將有更好的性能（尤其是在移動） http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/