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

“在转换为 0 的 2 个关键帧之间转换时，IE 10 似乎有一些奇怪的错误。”

解决方案是对两个关键帧使用几乎 0%。

在此处查看完整答案:translate3d between 0% and negative % in IE10