0

4 つの写真の間で切り替わるスライドがあります。一定のペースでスライドを進めていますが、最後のスライドが最初のスライドにすばやく移行しません。別の n 番目を追加しようとしましたが、最後の n 番目を遅くしようとしましたが、うまくいきません。スライド全体を特定の時間に移行させたいのですが、最後のスライドは最初のスライドに戻る必要があり、大きな黒い遅延が発生することはありません。コードは次のとおりです。

    .picTransition .item {
  position: absolute;
  left: 0;
  right: 0;
  opacity: 0;
  -webkit-animation: picTransition 56s linear infinite;
  -moz-animation: picTransition 56s linear infinite;
  -ms-animation: picTransition 56s linear infinite;
  animation: picTransition 56s linear infinite;
}
.picTransition .item:nth-child(2) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
.picTransition .item:nth-child(3) {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}
.picTransition .item:nth-child(4) {
  -webkit-animation-delay: 36s;
  -moz-animation-delay: 36s;
  -ms-animation-delay: 36s;
  animation-delay: 36s;
}

@-webkit-keyframes picTransition {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}
@-moz-keyframes picTransition {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}
@-ms-keyframes picTransition {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}
@keyframes picTransition {
    0%, 25%, 100% { opacity: 0; }
    4.17%, 20.84% { opacity: 1;}
}

ここで何が間違っていますか？

4

1 に答える 1

0

4つの画像があり、設定した場合

animation-delay: 12s;

それぞれのサイクル時間は 4 * 12 = 48 秒です。

代わりに、56 秒のサイクル タイムがあります。

animation: picTransition 56s linear infinite;

つまり、最後に8秒のギャップがあります

于 2013-06-02T11:06:06.543 に答える