CSS 关键帧动画在 IE10 中跳动

Question

我创建了一个简单的循环动画，它使用 translate 函数左右移动元素。这在 Chrome、Firefox 中运行良好，事件在 IE10 中启动良好，但是当动画反转时元素跳转。

我已经在 CodePen 上创建了一个问题示例，只需在 IE10 中打开它:http://codepen.io/anon/full/cxtza (更新)

我试图通过硬编码关键帧 0%、50% 和 100% 而不是 from/to 并使用 alternate 方向属性来缓解这个问题，我'我试过使用 translateX 而不是 3D，但到目前为止运气不好。

更新:错误已报告https://connect.microsoft.com/IE/feedback/details/785881/animated-transform-with-translate-and-percentage-value-jumps-ie10

Answer 1

转换百分比

当使用 % 值对 transform 属性进行动画处理时，似乎会出现此问题。如果您使用 px 值对 tranform 属性进行动画处理，它在 IE10 中运行良好。同样，如果您使用 % 值为 margin-left 等不同属性设置动画，它运行良好。

在为 transform 属性设置动画时，IE 似乎无法很好地处理 % 值。我建议要么使用 % 以外的单位，要么为 transform 以外的属性设置动画。

使用 px 值的示例

Updated demo (在 IE10、Firefox、Chrome、Safari 和 Opera 中测试良好)

@-webkit-keyframes pulse {
  from { -webkit-transform: translateX(0); }
  to   { -webkit-transform: translateX(100px); }
}
@-moz-keyframes pulse {
  from { -moz-transform: translateX(0); }
  to   { -moz-transform: translateX(100px); }
}
@keyframes pulse {
  from { transform: translateX(0); }
  to   { transform: translateX(100px); }
}

.blob {
    width: 320px;
    height: 320px;
    background: red;
    -webkit-animation: pulse 2s linear infinite alternate;
       -moz-animation: pulse 2s linear infinite alternate;
            animation: pulse 2s linear infinite alternate;
}

使用左边距的示例

Updated demo (在 IE10、Firefox、Chrome、Safari 和 Opera 中测试良好)

@-webkit-keyframes pulse {
    from { margin-left: 0%; }
    to   { margin-left: 20%; }
}
@-moz-keyframes pulse {
    from { margin-left: 0%; }
    to   { margin-left: 20%; }
}
@keyframes pulse {
    from { margin-left: 0%; }
    to   { margin-left: 20%; }
}

.blob {
    width: 320px;
    height: 320px;
    background: red;
    -webkit-animation: pulse 2s linear infinite alternate;
       -moz-animation: pulse 2s linear infinite alternate;
            animation: pulse 2s linear infinite alternate;
}