JavaScript 変数を CSS アニメーションに渡すにはどうすればよいですか?

JavaScript を使用して CSS アニメーションに変数を渡す

CSS アニメーションを操作する場合、JavaScript から値をパラメータとして渡す機能は非常に便利です。これにより、動的でインタラクティブなエクスペリエンスが可能になります。

解決策: CSS 変数

CSS では、変数を使用すると、JavaScript からアニメーションに値を渡すことができます。例:

.p1, .p2 {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: var(--m, 0%);
    width: var(--w, 100%);
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}

JavaScript での実装

JavaScript を使用すると、次の変数を設定できます。

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

使用例

これは、クラス「p2」の要素のアニメーションを変更します:

<p class="p1">
 This will not animate as the animation will use the default value set to the variable
</p>
<p class="p2">
  This will animate because we changed the CSS variable using JS
</p>

以上がJavaScript 変数を CSS アニメーションに渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。