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值设置%属性的动画时，似乎会出现此问题。如果使用tranform值为px属性设置动画，则它在IE10中运行正常。同样，如果您为margin-left之类的其他属性设置%值的动画，则运行正常。

在动画%属性时，IE似乎无法很好地处理transform值。我建议使用%以外的单位，或者为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;
}

IE10中的CSS关键帧动画跳跃

1 个答案:

％转换