0

私は CSS の経験があまりない開発者です。2 つの画像を使用して純粋な CSS3 スライドショーを作成したいと考えています。そうするための気の利いたコードをいくつか見つけたので、以下に非常にわずかなバリエーションを実装しました（基本的に、 の#cf3id セレクターを取り出しただけですimg .top）。

.slide {
    position:absolute;
}   

@keyframes cf3FadeInOut {
    0% {
          opacity:1;

}           
45% {
    opacity:1;

}           
55% {       
    opacity:0;

}       
100% {  
    opacity:0;

}       

}

img.top {
    animation-name: cf3FadeInOut;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 10s;
    animation-direction: alternate;

}

最初のイメージは として定義され<img class="slideshow top" src="img1.jpg">ます。"top"2番目は、クラスがないことを除いて同じです。

ページをロードすると、他のすべての CSS が機能しますが、アニメーションがどこにも見つかりません。私がどこで間違ったのか誰にもわかりますか？

4

1 に答える 1

0

ベンダー固有のプロパティ名を追加する必要があります。CSS3 アニメーションはまだドラフト仕様です。

-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 10s;
-webkit-animation-direction: alternate;

-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 10s;
-moz-animation-direction: alternate;

-o-animation-name: cf3FadeInOut;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: infinite;
-o-animation-duration: 10s;
-o-animation-direction: alternate;

animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;

/* and all the keyframes too */
@-webkit-keyframes cf3FadeInOut { ... }
@-moz-keyframes cf3FadeInOut { ... }
@-o-keyframes cf3FadeInOut { ... }
@keyframes cf3FadeInOut { ... }
于 2013-02-21T19:08:18.393 に答える