CSS3フォトギャラリートランジション効果

Question

"：ホバー"やJavascriptを使用せずに、フォトギャラリー内の画像間に優雅なトランジションを作成しようとしています。 （私はまだHTML5に気をつけています）

このスライドショーのアニメーションは、ページの読み込みから開始する必要があります。ユーザーの操作は必要ありません。しかし私のCSSは適切なタイミングではありません。理想的には、6秒ごとに、次の画像がフェードインするのと同じように、現在の画像がフェードアウトします。最後の画像の後にアニメーションが無限にループします。

私は、アニメーションをずらすために画像間に遅延を使用していますが、画像があまりにも重なり合っています。私はいくつかのことを誤解しているようです。私のCSSは以下の通りです：

#imgContainer { 
height: 205px; 
position: relative; 
width: 300px; 
} 

#imgContainer img { 
-moz-animation-duration: 12s; 
-moz-animation-iteration-count: infinite; 
-moz-animation-name: FadeInOut; 
-moz-animation-timing-function: ease-in-out; 
left: 0; 
position: absolute; 
} 
#imgContainer img:nth-of-type(1) { 
    -moz-animation-delay: 0s; 
} 
#imgContainer img:nth-of-type(2) { 
    -moz-animation-delay: 6s; 
} 
#imgContainer img:nth-of-type(3) { 
    -moz-animation-delay: 12s; 
} 

@-moz-keyframes FadeInOut { 
    0% { 
     opacity:0; 
    } 
    100% { 
     opacity:1; 
    } 
} 

私はCSS3には本当に新しいですので、援助のいずれかの種類が大幅に高く評価されるだろう。

Answer 1

成功！

スライドショー内の各画像にアニメーションを適用すると、遅延が発生するのではなく、私が望む効果を得ることができました。基本的に、アニメーションは無限ループで連続して実行され、単一のキーフレームを使用するのではなく、それぞれ独自のキーフレームを使用します。

私は15秒間隔でスライドショーを進めたいと思っていました。そこで、私はこれを達成するために、アニメーション全体の長さを45秒に設定しました。キーフレームは、アニメーション内の現在の時間またはフレームに基づいて、イメージの不透明度を徐々に調整します。これは "％"で示されます。たとえば、45％の2％〜32％の場合、最初の画像のキーフレームは100％不透明になります。 32％から34％の間で、最初の画像は不透明から完全に透明に移行し始めます。

（45％の34％） - （45％の32％）の差は、移行を完了するための時間になります。より長い移行のためにこの差を増やしてください。

2番目の画像のキーフレームは、45秒アニメーションの33％に達するまで、その遷移のみが開始されます。 （私は視覚的な魅力のためにそれらを少し重複して選んだ）。繰り返しますが、33％と35％の差を使って、遷移時間を短くします（遷移時間を0％と35％にするのではなく）。

3番目のキーフレームは、その画像に同じスキームに従います。

これを実装する際、ブラウザとWebオーディエンスのブラウザに適切なベンダープレフィックスを変更/追加することを忘れないでください。

/*Chrome/Safari: -webkit- \ FireFox +4: -moz- \ Opera: -o- \ IE9?: -ms- */ 

これは、同じことをしようとしている可能性がある他の人にも役立つことを願っています。あなたが読んだことが好きなら、あなたが上向きの矢印を使って投票するときに私に知らせてください。

ありがとうございました。

=）

#imgContainer img{ 
    position:absolute; 
    left:0; 
} 

#image0 { 
    -moz-animation: 45s linear 0s normal none infinite myKeyFrameName0; 
} 
#image1 { 
    -moz-animation: 45s linear 0s normal none infinite myKeyFrameName1; 
} 
#image2 { 
    -moz-animation: 45s linear 0s normal none infinite myKeyFrameName2; 
} 

@-moz-keyframes myKeyFrameName0 { 
0% {opacity: 0;} 
2% {opacity: 1;} 
32% {opacity: 1;} 
34% {opacity: 0;} 
100% {opacity: 0;} 
} 
@-moz-keyframes myKeyFrameNamee1 { 
0% {opacity: 0;} 
33% {opacity: 0;} 
35% {opacity: 1;} 
65% {opacity: 1;} 
67% {opacity: 0;} 
100% {opacity: 0;} 
} 
@-moz-keyframes myKeyFrameName2 { 
0% {opacity: 0;} 
66% {opacity: 0;} 
68% {opacity: 1;} 
98% {opacity: 1;} 
100% {opacity: 0;} 
}