如何使用 javascript 创建自定义关键帧 css 动画

Posted 2023-03-06

【中文标题】如何使用 javascript 创建自定义关键帧 css 动画

【英文标题】：How may I create custom keyframe css animation with javascript

【发布时间】：2012-04-04 08:42:39

【问题描述】：

我需要使用 javascript 创建和运行自定义 css3 动画。 当我需要创建过渡时，我会写如下内容：

element.style[Modernizr.prefixed('transform')] = 'rotateY(50deg)';

当我需要动画元素时我应该写

element.style[Modernizr.prefixed('animation')] = "'test' 2s ease-out infinite";

但我不能以同样的方式为“打开”创建关键帧。 当然，我可能会写类似

document.creteElement("style").innerhtml = rule;

但这是一个肮脏的想法，所以在阅读programmatically changing webkit-transformation values in animation rules之后我写了这个：

var style = document.documentElement.appendChild(document.createElement("style")),
index = Modernizr._prefixes.length,
rule = "";

while(index--)
    rule+="@"+Modernizr._prefixes[index]+"keyframes 'test' 0%opacity:1; 50%opacity:0; 100%opacity:1; ";


style.sheet.insertRule(rule);
$(".mojo")[0].style[Modernizr.prefixed('animation')] = "'test' 2s ease-out infinite";

​

并得到错误：未捕获的错误：SYNTAX_ERR: DOM Exception 12

我做错了什么，我该如何做更合适的方式？这看起来很可怕。

http://jsfiddle.net/silentimp/273e2/ — 测试

【问题讨论】：

jsfiddle.net/silentimp/273e2/1 — 解决方案

我非常喜欢这个解决方案。我希望看到它更进一步，也许可以抽象成一个函数，让您可以轻松访问您的CSSKeyframeRules，以允许即时获取/设置。

【参考方案1】：

var keyframes = "@-webkit-keyframes...";
var s = document.createElement( 'style' );
s.innerHTML = keyframes;

source

或

https://github.com/krazyjakee/jQuery-Keyframes

【讨论】：

得到如下错误：Failed to load resource: The requested URL was not found on this server. file:///Users/ks/Desktop/website/undefined