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 に答える