繰り返される CSS アニメーションで一貫した遅延を実現するにはどうすればよいですか?

CSS を使用した繰り返しアニメーションのスタイル設定: アニメーション遅延への対処

CSS アニメーションを使用する場合、繰り返し効果の表示を効果的に制御することが不可欠です。よくある問題の 1 つは、アニメーション遅延プロパティが最初の反復にのみ影響し、アニメーションが一時停止せずに継続的に繰り返される場合に発生します。

これを解決するには、遅延をエミュレートする新しいアニメーションを作成する方法があります。提供されたコードでは、「expbarshine」アニメーションはグラデーション スイープを 80% 遅延させ、目的の一時停止を効果的にシミュレートします。ただし、このアプローチではアニメーションの合計時間が変更される可能性があります。

別のユーザーが提案した代替ソリューションには、ニュートラルな中間キーフレームの使用が含まれます。以下のコード スニペットでは、「パン」アニメーションは全体の継続時間を変更せずに同様の結果を実現しています。

@-webkit-keyframes pan {
   0%, 10%       { -webkit-transform: translate3d( 0%, 0px, 0px); }
   90%, 100%     { -webkit-transform: translate3d(-50%, 0px, 0px); }
}

ニュートラル キーフレームを 90% で定義することで、アニメーションに影響を与えることなく、一時停止がすべての反復に効果的に適用されます。間隔。このアプローチにより、より優れた制御と柔軟性が提供され、同じアニメーションを使用する要素間で一貫した遅延が可能になります。

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