CSS翻譯在IE 10中無法獲得正確的動畫寬度

Question

我有一件奇特的事情在繼續。我有一個有很好的小負載指示器的盒子。它在盒子的整個寬度上進行動畫，如下所示：

@keyframes line-moving { 
0% {transform: translate3d(-100%, 0, 0);} 
40% {transform: translate3d(0, 0, 0);} 
60% {transform: translate3d(0, 0, 0);} 
100% {transform: translate3d(100%, 0, 0);} 
} 

這很好，很乾淨。你可以在這裏看到它的動作：https://jsfiddle.net/hsmb1f7d/

但是，在IE 10上，動畫的最後部分只能達到盒子寬度的20％，而不是100％。我似乎無法弄清楚爲什麼。一些更多的細節：

• 動畫不會被切斷，因爲它確實緩解了;所以看起來這是一個寬度計算問題。
• 當我刪除了動畫，只是設置transform: translate3d(100%, 0, 0);的元素，它確實得到正確的寬度...

有誰知道爲什麼它不會在動畫全寬？

Answer 1

「看起來IE 10在2個關鍵幀之間進行轉換時存在一些奇怪的錯誤，並且轉換爲0。

解決方案是爲兩個關鍵幀使用幾乎0％。

查看此處的完整答案：translate3d between 0% and negative % in IE10