複数の子要素に対して交互に配置された CSS アニメーションを効率的に作成するにはどうすればよいですか?

子要素の遅延をずらした CSS アニメーション

要素内の各子要素がアニメーションするカスケード効果を作成することを目的としています。遅れ。これを実現するには、コード スニペットに見られるように、各子のアニメーション遅延を個別に手動で設定しています。ただし、子要素の数に基づいて遅延を動的に適用するためのより効率的なソリューションを探しています。

Sass for ループを使用した CSS ソリューションは、この問題に対する簡潔でスケーラブルなアプローチを提供します。

@for $i from 1 through 10 {
    .myClass img:nth-child(#{$i}n) {
        animation-delay: #{$i * 0.5}s;
    }
}

このループは 1 から 10 (子要素の予想される数に合わせて調整可能) を繰り返し、計算された遅延値を各子に割り当てます。 n 番目の子セレクター。遅延は、子のインデックス ($i) に必要な遅延期間 (この例では 0.5 秒) を乗算して計算されます。

このループを使用すると、手動で実行せずに、任意の数の子要素にカスケード遅延を適用できます。個々のスタイルを書き出す。このソリューションにより、各子にスタイルを明示的に指定する必要がなくなり、すべての要素間の一貫性が確保されます。

以上が複数の子要素に対して交互に配置された CSS アニメーションを効率的に作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。