CSS で画像を永久にアニメーションさせる方法

この記事では、CSS3 アニメーションを無期限に実行するという、CSS3 アニメーションに関するよくある質問に対処します。

The Challenge

スライドショーとして表示したい一連の写真があり、次のコマンドを使用して写真間をスムーズに切り替えられるとします。 CSS3アニメーション。ただし、最後の写真がフェードアウトしてページがリロードされ、実質的にスライドショーが再開されるデフォルトの動作に満足していません。

解決策

シームレスなループ アニメーションを実現するには、次のことが必要です。 CSS を変更して、アニメーションを継続的に繰り返すように指定します。デフォルトでは、CSS アニメーションは 1 回だけ実行されるように設定されています。

CSS に追加する重要なプロパティは animation-iteration-count です。以下に例を示します:

@keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

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

@-webkit-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1;
  animation-iteration-count: infinite;
  -moz-animation: fadeinphoto 7s 1;
  -webkit-animation: fadeinphoto 7s 1;
  -o-animation: fadeinphoto 7s 1;
}

animation-iteration-count を infinite に設定すると、アニメーションが無限にループし続け、写真間のシームレスな遷移が作成されます。