CSS アニメーション パラメータを動的にカスタマイズするにはどうすればよいですか?

パラメータ化された値を使用した CSS アニメーションのカスタマイズ

提供された CSS アニメーションは、左からスライドインする要素の継続時間とパラメータを設定します。ただし、コンテキストに基づいてこれらのパラメータを動的にカスタマイズしたい場合はどうすればよいでしょうか?

これを実現する 1 つの方法は、CSS 変数を利用することです。方法は次のとおりです。

p {
アニメーション期間: 3 秒;
アニメーション名: slidein;
}

@keyframes slidein {
from {

margin-left: var(--m, 0%);
width: var(--w, 100%);

}

へ{

margin-left: 0%;
width: 100%;

}
}

JavaScript を使用して、次のように --m (左マージン) と --w (幅) の値を設定できます。

document.querySelector('.p2').style.setProperty('--m', '100%');
document.querySelector('.p2').style.setProperty('--w', '300%');

これにより、アニメーション パラメータを制御できるようになります。特定の要素を動的に変更します。

例として、クラス名「p1」と「p1」を持つ 2 つの段落について考えてみましょう。 "p2":

.p1,.p2 {
アニメーション期間: 3 秒;
アニメーション名: slidein;
}

これはアニメーションでは、に設定されたデフォルト値が使用されるため、アニメーション化されません。 variable

JS を使用して CSS 変数を変更したため、これはアニメーション化されます

最初の段落は、以下を使用しているためアニメーション化されません--m と --w のデフォルト値。ただし、2 番目の段落は、JavaScript で設定されたカスタマイズされたパラメータに従ってアニメーション化されます。

以上がCSS アニメーション パラメータを動的にカスタマイズするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。