如何使用 JavaScript 动态设置 WebKit 关键帧动画旋转值？

动态关键帧值：在 CSS 中使用 JavaScript 变量

问题：

你怎么能使用 JavaScript 动态设置 Webkit 关键帧动画的旋转值变量？

答案：

在CSS中，你不能直接将JavaScript变量插入到关键帧动画中。为此，您需要通过 JavaScript 创建 CSS 规则并将它们插入到 CSS 对象模型 (CSSOM) 中。

请考虑以下示例代码：

@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-10deg);}
    100% {-webkit-transform: rotate(10deg);}
}

#dog{
/*irrelevant settings*/
-webkit-animation: rotate 5s infinite alternate ease-in-out;
}

动态设置旋转值，您可以编写一个 JavaScript 函数：

// Assume var dogValue = "20deg";
var styleElement = document.createElement('style');
styleElement.type = 'text/css';
var keyframesRule = `@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(-${dogValue});}
    100% {-webkit-transform: rotate(${dogValue});}
}`;
styleElement.appendChild(document.createTextNode(keyframesRule));
document.head.appendChild(styleElement);

此代码创建一个新的

通过遵循这种方法，您可以使用 JavaScript 变量动态设置关键帧值，确保 CSS 规则根据您的需要进行更新。

以上是如何使用 JavaScript 动态设置 WebKit 关键帧动画旋转值？的详细内容。更多信息请关注PHP中文网其他相关文章！