0

ページの div の背景画像を変更してスライドショーを表示する CSS3 アニメーションを実行していますが、Chrome と Safari では -webkit- プレフィックスを付けてすべて正常に動作しますが、コードにプレフィックスなしのバージョンがあっても機能しませんFirefox で作業したい。これを引き起こす可能性のある、私が見逃した私のコードの何かを誰かが見つけることができますか?

@keyframes slideshow
    {
0%      {background-image: url(Images/sl1.jpg);}
8.3%        {background-image: url(Images/sl2.jpg);}
16.7%       {background-image: url(Images/sl3.jpg);}
25%     {background-image: url(Images/sl4.jpg);}
33.3%       {background-image: url(Images/sl5.jpg);}
41.7%       {background-image: url(Images/sl6.jpg);}
50%     {background-image: url(Images/sl7.jpg);}
58.3%       {background-image: url(Images/sl8.jpg);}
66.7%       {background-image: url(Images/sl9.jpg);}
75%     {background-image: url(Images/sl10.jpg);}
83.3%       {background-image: url(Images/sl11.jpg);}
91.7%       {background-image: url(Images/sl12.jpg);}
100%        {background-image: url(Images/sl1.jpg);}
}

@-webkit-keyframes slideshow
{
0%      {background-image: url(Images/sl1.jpg);}
8.3%        {background-image: url(Images/sl2.jpg);}
16.7%       {background-image: url(Images/sl3.jpg);}
25%     {background-image: url(Images/sl4.jpg);}
33.3%       {background-image: url(Images/sl5.jpg);}
41.7%       {background-image: url(Images/sl6.jpg);}
50%     {background-image: url(Images/sl7.jpg);}
58.3%       {background-image: url(Images/sl8.jpg);}
66.7%       {background-image: url(Images/sl9.jpg);}
75%     {background-image: url(Images/sl10.jpg);}
83.3%       {background-image: url(Images/sl11.jpg);}
91.7%       {background-image: url(Images/sl12.jpg);}
100%        {background-image: url(Images/sl1.jpg);}
}

#slideshow
{
float: right;
width: 80%;
height: 100%;
margin: 0;
padding: 0;
background-image: url(Images/sl1.jpg);
animation: slideshow 60s;
animation-iteration-count: infinite;
-webkit-animation: slideshow 60s;
-webkit-animation-iteration-count: infinite;
background-size: cover;
}

jquery スクリプトを使用して css にウィンドウ サイズを入力し、画像がブラウザのサイズ内にとどまるようにしていますが、影響はありますか?

<script src="/jquery-1.10.2.min.js"></script>
<script>
function windowH() {
var wH = $(window).height();

$('.sideBar, .slideshow').css({height: wH});
}

windowH();
</script>

これに関するヘルプは大歓迎です。どうもありがとう

4

1 に答える 1

1

どうやら、アニメーションbackground-imageは Firefox ではまだサポートされていません。

Firefox の CSS3 アニメーションと背景画像

opacityおそらく、すべての画像を読み込んでから、一度に 1 つずつ表示することで、目的の効果を得ることができますz-index。

于 2013-11-03T14:01:18.140 に答える