Question

我在CSS10中没有触发的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 }
}

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

IE10不会触发动画（水平移动图片）

1 个答案: