动态关键帧值：在 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中文网其他相关文章！
