css - IE10 不会触发动画(水平移动图片)

Question

我在 IE10 中无法触发的 CSS3 动画遇到了一些问题。

我基本上有一个大部分透明但有一些细节的静态图像，在它后面有一个应该水平移动的背景图像。它在 Chrome 中运行良好，但在 IE10 ( win7 ) 中运行良好，我不知道我做错了什么。

各种提示和技巧将不胜感激。

<div id="skyover">
    <img src="hh_sky_transp2.png" alt="logo" width="1000" height="202" />
</div>
<div id="sky">
    <img src="hh_sky.jpg" alt="logo" width="2016" height="202" />
</div>

#skyover {
    position: absolute;
    z-index: 10;
}

#sky { 
    width: 1000px;
    height: 202px;
    position: relative;
    animation: skymove 10s infinite;
    animation-direction: alternate;
    -webkit-animation: skymove 10s infinite;
    -webkit-animation-direction: alternate;
}

@keyframes skymove {
    from { left: 0px; }
    to { right: 1000px; }
}

@-webkit-keyframes skymove {
    from { left: 0px; }
    to { right: 1000px; }
}

Answer 1

这里的问题是从左原点到右原点的动画:

@keyframes skymove {
    from { left: 0px }
    to { right: 1000px }
}

如果将 to 原点更改为 left，问题就解决了:

@keyframes skymove {
    from { left:0px }
    to { left: 1000px }
}

fiddle :http://jsfiddle.net/HGe5D/2/show/