IE10 中的 CSS 关键帧动画跳跃

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