CSS `animation-lay` が最初のアニメーション反復にのみ影響する場合があるのはなぜですか?

CSS でのアニメーションの遅延について理解する

アニメーション遅延プロパティは、アニメーションが開始するまでの遅延を制御する重要な CSS 属性です。ただし、特定のシナリオでは、アニメーションの最初の反復にのみ適用され、後続の反復には影響しない場合があります。

たとえば、次のコードを考えてみましょう。

@keyframes barshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 1s 4s linear infinite;
}

この例では、 4 秒のアニメーション遅延は、アニメーションの最初のループにのみ適用されます。その後、輝きのアニメーションは遅延なく無限に続きます。

代替アプローチ

アニメーション遅延を使用する代替の 1 つは、アニメーション キーフレーム内に中間ステップを導入することです。例:

@keyframes expbarshine {
  from {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  80% {background-image:linear-gradient(120deg,rgba(255,255,255,0) -10%,rgba(255,255,255,0.25) -5%,rgba(255,255,255,0) 0%);}
  to {background-image:linear-gradient(120deg,rgba(255,255,255,0) 100%,rgba(255,255,255,0.25) 105%,rgba(255,255,255,0) 110%);}
}
.progbar {
  animation: barshine 5s linear infinite;
}

この手法は、アニメーションの継続時間を効果的に延長して、必要な遅延 (この場合は合計の継続時間の 80%) に対応します。ただし、この方法ではアニメーションの外観が変わる可能性があります。

ブラウザ間の互換性

アニメーション遅延の動作はブラウザごとに異なる可能性があることに注意することが重要です。 。一部のブラウザーはすべての反復にわたって一貫して遅延を適用する場合がありますが、他のブラウザーは後続のループごとに遅延をリセットする場合があります。その結果、多くの場合、ブラウザー固有の回避策を採用する必要があります。

以上がCSS `animation-lay` が最初のアニメーション反復にのみ影響する場合があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。