CSS アニメーションの反復間に一貫した遅延を追加するにはどうすればよいですか?

CSS アニメーションの遅延: 反復間の一時停止を延長する

反復間で一貫した遅延を持つ繰り返しアニメーションを実現するには、最初の反復にのみ適用される場合は、次の方法を検討してください。

1.アニメーションの長さを調整する:

回避策の 1 つは、アニメーションの長さに必要な遅延を組み込むことです。これには、アニメーションにかかる実際の継続時間 (遅延を含む) を計算し、それに応じてアニメーション継続時間プロパティを設定することが含まれます。例:

@keyframes barshine {
  <!-- ...Animation definition here... -->
}
.progbar {
  animation: barshine 5s linear infinite;
  animation-delay: 1s;
}

この例では、アニメーションの実際の持続時間は 5 秒で、遅延は 1 秒になります。

2.遅延とエフェクトに個別のアニメーションを使用する:

もう 1 つの方法は、遅延と実際のエフェクトに個別のアニメーションを作成することです。この方法により、アニメーション自体から独立して遅延を制御できる柔軟性が高まります。これを実現する方法は次のとおりです:

@keyframes shine {
  <!-- ...Animation definition for the effect here... -->
}
@keyframes delay {
  from {opacity: 0;}
  to {opacity: 1;}
}
.progbar {
  animation: delay 4s, shine 1s infinite;
}

この場合、「遅延」アニメーションは 4 秒かけて不透明度を 0 から 1 に徐々に増加させ、フェードイン効果を作成します。その後、「輝き」アニメーションが無限に実行され、意図したスイープ グラデーションが作成されます。

3.ベンダー プレフィックスを使用します:

場合によっては、「animation-delay」プロパティでブラウザの互換性の問題が発生する可能性があります。互換性を確保するには、標準プロパティとともに「-webkit-」や「-moz-」などのベンダー プレフィックスを含めることをお勧めします。例:

@-webkit-keyframes barshine {
  <!-- ...Animation definition... -->
}
@-moz-keyframes barshine {
  <!-- ...Animation definition... -->
}

追加メモ:

「@-webkit-keyframes」を使用した回答から提供されたコードは、古いバージョンの WebKit に適しています。互換性のために必要な場合を除き、最新の開発ではベンダー プレフィックスに依存することは一般的に推奨されません。

以上がCSS アニメーションの反復間に一貫した遅延を追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。