CSS `animation-lay` は繰り返されるアニメーションのすべての反復に影響しますか?

繰り返しアニメーションにおける CSS アニメーションの遅延の問題

コンテキスト:

CSS アニメーションの作成は、ビジュアルを追加するための強力なツールとなり得ますWeb ページへの効果。ただし、アニメーションの開始を遅らせるようにアニメーション遅延プロパティを設定すると、アニメーションが無限に繰り返すように設定されている場合に予期しない動作が発生する可能性があります。

質問:

はアニメーション遅延プロパティが、CSS アニメーションの最初の反復だけではなく、繰り返されるすべての反復に確実に適用されるようにすることができます。反復?

答え:

いいえ、アニメーション遅延プロパティは、繰り返される CSS アニメーションのすべての反復に適用できません。最初の遅延が最初の反復に適用されると、アニメーション遅延が指定されている場合でも、後続の反復はすぐに開始されます。

回避策:

一般的な回避策最初のキーフレームと同一の任意の割合（80% など）で新しいキーフレームを作成することです。これにより、アニメーションに目に見えない期間が埋め込まれ、効果的に遅延が発生します。ただし、遅延が必要な場合、このアプローチではアニメーションが長くなる可能性があります。

もう 1 つのアプローチは、異なる長さの複数のキーフレームを使用して、目的の遅延を作成することです。たとえば、4 秒の遅延の後に 1 秒のアニメーションを実行するには、次のキーフレームを使用できます:

@keyframes my-animation {
  0% { ... }
  80% { ... }
  90% { ... }
  100% { ... }
}

アニメーション期間を 5 秒に設定すると、4 秒の遅延が発生します。アニメーションが始まる前に。

制限:

価値があるアニメーション遅延プロパティは、すべての反復を含むアニメーション全体に適用されることに注意してください。したがって、同じアニメーションを使用するさまざまな要素に対してさまざまな遅延が必要な場合は、異なる遅延を持つ個別のアニメーションを作成するなど、別のアプローチを使用する必要があります。

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