4

我创建了一个简单的循环动画，它使用该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

4

1 回答 1

6

% 转换

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

%为属性设置动画时，IE 似乎不能很好地处理值transform。我建议使用除 以外的单位%，或为除 以外的属性设置动画transform。

使用 px 值的示例

更新的演示   （在 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;
}

使用左边距的示例

更新的演示   （在 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;
}
于 2013-04-26T18:36:31.630 回答