动态管理 webkit 动画答案

【问题标题】：Manage webkit animations dynamically动态管理 webkit 动画
【发布时间】：2011-09-16 12:47:38
【问题描述】：

我正在寻找一种无需部署静态 CSS 声明即可管理 webkit 动画的好方法。简而言之，仅使用 Javascript 添加关键帧部分、删除它们、更改它们等。我想我可以问而不是重新发明轮子。

是否有一个简单的 javascript lib 可以做这样的事情（不是 jQuery 或类似的东西，只是一个小的 sn-p 函数）？

必须有办法做这样的事情（伪代码）：

function setupAnim(aName) {
 /* becomes: @-webkit-keyframes "aName" */
 var mRule = jsAddCSSRule(aName);
 if (mRule) {
   /* inject CSS properties here */
   mRule.innerHTML = "from {...} to {...}";
 }
}

function removeAnim(aName) {
  var mRule = jsFindCSSRule(aName);
  if (mRule) {
    removeCSSRule(mRule);
  }
}

欢迎任何帮助！

【问题讨论】：

请分享您的解决方案！
检查 smartmobilestudio 中的 RTL

标签： javascript safari webkit mobile-safari

【解决方案1】：

我找到了https://github.com/krazyjakee/keyframes.js，它允许您创建和覆盖 CSS 动画。但是，它（当前）破坏了单个 <style> 元素，如果您要创建大量动画规则，这可能效率低下，因为浏览器必须重新解析所有规则。

未来，CSSOM 提案的实施可能会让我们做出更细粒度的更改。 https://github.com/NV/CSSOM

在浏览器控制台中四处寻找，我确实发现浏览器公开了操纵现有 CSS 规则的方法，但我并没有取得很大的成功。

【讨论】：