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

JavaScript を使用した Webkit キーフレーム値の動的生成

JavaScript によって生成された乱数を CSS キーフレーム アニメーションの回転に組み込もうとしています。 CSS は JavaScript 変数を認識しないため、これを直接行うことはできません。

これを実現するには、JavaScript を通じて CSS ルールを動的に作成または変更し、CSS オブジェクト モデルに挿入する必要があります。修正された構文は次のとおりです。

function setRotationTransform(element, startRotation, endRotation) {
  var rotationCSS = `@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(${startRotation}deg);}
    100% {-webkit-transform: rotate(${endRotation}deg);}
  }`;

  // Insert the generated CSS rules into the CSSOM
  var styleElement = document.createElement('style');
  styleElement.type = 'text/css';
  styleElement.innerHTML = rotationCSS;
  document.head.appendChild(styleElement);

  // Apply the generated keyframe animation to the element
  element.style.animation = 'rotate 5s infinite alternate ease-in-out';
}

このメソッドを適用するには、次の手順が必要です。

1. JavaScript で乱数ジェネレーターを作成します。
2. 使用setRotationTransform() 関数は、ランダムな値を使用して CSS キーフレーム ルールを動的に生成します。数値。
3. 生成された CSS ルールを CSSOM に挿入します。
4. element.style.animation = 'rotate 5s immunoalternateease-in-out'; を使用して、回転アニメーションをターゲット要素に適用します。 .

このアプローチにより、キーフレーム値を動的に更新し、それを CSS 要素に適用することができ、動的な回転が可能になります。 JavaScript によって生成された乱数に基づきます。

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