How Can I Dynamically Control WebKit Keyframe Rotation with JavaScript?

Dynamically Set Webkit Keyframe Rotation Values Using JavaScript Variables

You're aiming to incorporate JavaScript variables into CSS keyframes to randomly rotate elements. Unfortunately, CSS cannot directly interpret JavaScript variables.

Creating CSS Rules Dynamically

To achieve your goal, you need to create or modify the CSS rules in JavaScript and add them to the CSS Object Model (CSSOM). This approach involves:

• Creating a new keyframe animation and adding it to the CSSOM.
• Overwriting an existing keyframe animation with different values.

Example Implementation

Consider the following example that overwrites an existing "rotate" keyframe animation:

<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>

This code creates a new "rotate" keyframe animation with random rotation values and adds it to the CSSOM. It then overwrites the existing "rotate" animation applied to the "#dog" element.

By utilizing this technique, you can dynamically modify CSS keyframe values using JavaScript variables.

The above is the detailed content of How Can I Dynamically Control WebKit Keyframe Rotation with JavaScript?. For more information, please follow other related articles on the PHP Chinese website!