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