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

如果更改爲left的to點的起源，問題已解決：

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

小提琴：http://jsfiddle.net/HGe5D/2/show/