JavaScript を使用して WebKit キーフレームの回転を動的に制御するにはどうすればよいですか?

JavaScript 変数を使用して Webkit キーフレームの回転値を動的に設定する

JavaScript 変数を CSS キーフレームに組み込んで要素をランダムに回転させることを目的としています。残念ながら、CSS は JavaScript 変数を直接解釈できません。

CSS ルールを動的に作成する

目的を達成するには、JavaScript で CSS ルールを作成または変更し、追加する必要があります。 CSS オブジェクト モデル (CSSOM) に変換します。このアプローチには次のことが含まれます。

• 新しいキーフレーム アニメーションを作成し、CSSOM に追加します。
• 既存のキーフレーム アニメーションを別の値で上書きします。

実装例

次の例を考えてみましょう。既存の「回転」キーフレーム アニメーションを上書きします:

<script>
  // Generate random rotation values
  var dogValue = "20deg";
  var minValue = -360;
  var maxValue = 360;

  // Create a new keyframe rule
  var styleElement = document.createElement('style');
  document.head.appendChild(styleElement);

  // Define the new keyframes
  var keyframes = `
    @-webkit-keyframes rotate {
      0% {-webkit-transform: rotate(${minValue}deg);}
      100% {-webkit-transform: rotate(${maxValue}deg);}
    }
  `;

  // Overwrite the existing keyframe animation
  styleElement.innerHTML = keyframes;

  // Apply the new animation to the target element
  var dogElement = document.getElementById('dog');
  dogElement.style.animation = "rotate 5s infinite alternate ease-in-out";
</script>

このコードは、ランダムな回転値を使用して新しい「回転」キーフレーム アニメーションを作成し、CSSOM に追加します。次に、「#dog」要素に適用されている既存の「回転」アニメーションを上書きします。

この手法を利用すると、JavaScript 変数を使用して CSS キーフレーム値を動的に変更できます。

以上がJavaScript を使用して WebKit キーフレームの回転を動的に制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。