IE10 中 0% 和负 % 之间的 translate3d

Question

我有一个元素需要在其整个宽度的 50% 左右进行动画处理。

我使用以下（简化的）标记完成了此操作：

<div class="wrapper">
  <div class="inner">Inner</div>
</div>

和风格：

.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); }
}

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

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

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

这是一支笔：http://codepen.io/alexcoady/pen/JogPgx

Answer 1

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

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

示例 (Codepen):

@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 );
  }
}

或者，您可以只在两个关键帧中使用几乎为零的值。

示例 (Codepen):

@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 );
  }
}

谢天谢地，这个问题似乎已在 IE 11 中得到修复。

IE10 中 0% 和负 % 之间的 translate3d

translate3d between 0% and negative % in IE10

css

internet-explorer-10

css-animations

css-transforms

示例 (Codepen):

示例 (Codepen):