時間制限のあるループ スライドショーで一連の 10 個の画像をアニメーション化しようとしています。スライドショーはすでに機能しています... ある種。CSS3 に非常に慣れていないので、一日中 Google を検索しても、この懸念に対する答えが見つかりませんでした。
私の最初の問題は、各画像のタイミングにあります。既に 10 個の画像のそれぞれに div があり、CSS で各画像の個別のルールを記述しています (以下の「etc....」で示されているように)。
使用している画像の数に応じて @keyframe アニメーションのパーセンテージを計算する方法がわかりません。以下に例を示します。
@-webkit-keyframes anim_slides {
0% { opacity:0; }
6% { opacity:1; }
24% { opacity:1; }
30% { opacity:0; }
100% { opacity:0;}
}
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
-webkit-animation-delay: 8.0s;
-moz-animation-delay: 8.0s;}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
-webkit-animation-delay: 16.0s;
-moz-animation-delay: 16.0s;}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
-webkit-animation-delay: 24.0s;
-moz-animation-delay: 24.0s;}
.slides ul li:nth-child(5), .slides ul li:nth-child(5) div {
-webkit-animation-delay: 32.0s;
-moz-animation-delay: 32.0s;}
etc....
私が最も関心があるのはパーセンテージであるため、.slides 情報を参照として含めました。
私が見つけた CSS3 アニメーションのチュートリアルのほとんどは、3 ～ 6 枚の画像のみを使用しており、パーセンテージはその量に合わせて特別に設定されています。10枚の画像を使用しているため、パーセンテージはもはや相関していないようです。
第二に、（明らかに）標準の 3 ～ 6 枚の画像よりも多くの画像がある場合、アニメーションの長さにどのような影響があるかわかりません。
.slides ul li {
opacity:0;
position:absolute;
top:0;
/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 80.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name: anim_slides;
-moz-animation-duration: 80.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;}
ご覧のとおり、animation-duration は 80.0 秒に設定されています。正直なところ、それが正しいかどうかさえわかりません。
誰でも私を助けることができますか？本当に必要なのは説明だけです。
ありがとうございました！