1

我在 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; }
}
4

1 回答 1

2

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

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

如果将to原点更改为left，则问题得到解决：

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

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

于 2013-04-17T20:16:49.307 回答