Css 在IE10中，在0%和负%之间转换3d

我有一个元素，它需要左右移动到其全宽的50%

我通过以下（简化的）标记完成了这一点：

使用关键帧动画：

@keyframes MOVE_AROUND {
  0%, 10% { transform: translate3d(0, 0, 0); }
  20%, 40% { transform: translate3d(-50%, 0, 0); }
  60%, 80% { transform: translate3d(50%, 0, 0); }
  90%, 100% { transform: translate3d(0, 0, 0); }
}

注：为简洁起见，省略了供应商前缀

在IE10中，它不是移动元素宽度的50%，而是在负片中移动较小（任意？）的量，然后在正片中移动相同的量，然后在80%到90%之间的动画阶段，捕捉到完整的50%距离，然后返回到0%

我想这与负百分比有关，尽管我在其他地方找不到任何相关信息

---

这是一支笔：

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

当然这并不理想，但如果对两个关键帧使用几乎为零的百分比，则可以在IE 10中实现相同的效果

示例（）： 或者，您可以在两个关键帧中使用几乎为零的值

示例（）：

---

谢天谢地，这个问题似乎已经在IE 11中得到了解决。

我在IE 11中也遇到过类似的问题，但几乎是0为我解决了这个问题。

.wrapper {
  position: relative;
  width: 300px;
  height: 200px;
}

.inner {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  animation: MOVE_AROUND 5s infinite;
}

@keyframes MOVE_AROUND {
  0%, 10% { transform: translate3d(0, 0, 0); }
  20%, 40% { transform: translate3d(-50%, 0, 0); }
  60%, 80% { transform: translate3d(50%, 0, 0); }
  90%, 100% { transform: translate3d(0, 0, 0); }
}

@keyframes MOVE_AROUND_TRANSFORM {
  0% {
    transform: translate3d( 0, 0, 0 );
  }
  10% {
    transform: translate3d( 0.0001%, 0, 0 );
  }
  20%, 40% {
    transform: translate3d( -50%, 0, 0 );
  }
  60%, 80% {
    transform: translate3d( 50%, 0, 0 );
  }
  90% {
    transform: translate3d( 0.0001%, 0, 0 );
  }
  100% {
    transform: translate3d( 0, 0, 0 );
  }
}

@keyframes MOVE_AROUND_TRANSFORM {
  0%, 10% {
    transform: translate3d( 0.0001%, 0, 0 );
  }
  20%, 40% {
    transform: translate3d( -50%, 0, 0 );
  }
  60%, 80% {
    transform: translate3d( 50%, 0, 0 );
  }
  90%, 100% {
    transform: translate3d( 0.0001%, 0, 0 );
  }
}