2

キーフレームを使用して簡単なアニメーションを作成しようとしていますが、Chrome でしか機能しません。コードは次のとおりです（短い投稿のために、キーフレームコードを1回だけ含めました）：

@keyframes logokf {
    0% {
    background-image: url('gfx/logo1.png');
    }    
    20% {
    background-image: url('gfx/logo2.png');
    }    
    40% {
    background-image: url('gfx/logo3.png');
    }    
    60% {
    background-image: url('gfx/logo4.png');
    }    
    80% {
    background-image: url('gfx/logo1.png');
    }    
    100% {
    background-image: url('gfx/logo1.png');
    }

}


@-webkit-keyframes logokf {    
}

@-moz-keyframes logokf {             
}

@-o-keyframes logokf { 
}

@-ms-keyframes logokf {
}

#logo:hover {
float: left;
height: 75px;
margin: 28px 0 22px;
width: 276px;

/*animation-name*/
-webkit-animation-name:logokf;
-moz-animation-name:logokf;
-ms-animation-name:logokf;
-o-animation-name:logokf;
animation-name:logokf;

/*animation-duration*/
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;

/*animation-iteration-count*/
-webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite;
-ms-animation-iteration-count:infinite;
-o-animation-iteration-count:infinite;
animation-iteration-count:infinite;

/*animation-timing-function*/
-webkit-animation-timing-function:lineare;
-moz-animation-timing-function:lineare;
-ms-animation-timing-function:lineare;
-o-animation-timing-function:lineare;
animation-timing-function:lineare;

/*animation-delay*/
-webkit-animation-delay:0s;
-moz-animation-delay:0s;
-ms-animation-delay:0s;
-o-animation-delay:0s;
animation-delay:0s;

 }

どうすれば修正できるか、またはキーフレームが他のブラウザーからまだサポートされていないという考えはありますか?

4

1 に答える 1

2

background-image 自体は有効な遷移可能なプロパティではないようです。たまたま Chrome で動作する可能性がありますが、おそらく運がいいだけです。実装されると、CSS 画像でクロスフェード機能を使用するようになるでしょう。

于 2012-09-27T15:47:49.250 に答える