JavaScript怎么修改@keyframes

Question

可以在stylesheet取得@keyframes，但是比如
var a = doucment.styleSheets[0].cssrules[2];
keyframes也就是a不存在style属性，倒是可以用a.cssRules[i].cssText取得keyframe括号里的属性，但是修改的话不行，也用过deleteRules可以删除规则，但是insertRule却是undefined，不知道到底怎么修改keyframes？

还有假如动画正在运行的，话我通过js把它暂停了，在对他修改能否有效？

Answer 1

今天也遇到类似需求，国内搜索引擎得到的答案，如何也不能很好的工作（?），还是国外给的答案参考性更为靠谱，参考how-to-dynamically-create-keyframe-css-animations；

var dynamicValue = "33.3";
var  = "@-webkit-keyframes run{0% {transform:translateX(0%);-webkit-transform:translateX(0%);}\n"+
      "100%{transform:translateX("+ dynamicValue + "%);-webkit-transform:translateX("+ dynamicValue +"%);}}";

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '';
document.getElementsByTagName('head')[0].appendChild(style);
this.stylesheet = document.styleSheets[document.styleSheets.length-1];

try {
    this.stylesheet.insertRule( rule , this.stylesheet.rules.length);
} catch (e) {
};

如上方法亲测可行（@16-06-28）。

Answer 2

直接修改 keyframes 内容似乎不行，所以采取了迂回的路线，重新定义 animation 来达到目的。这个是 DEMO: http://jsfiddle.net/7cesyc3b/2/

Answer 3

keyframes之所以是复数，就是因为它里面还包含很多子样式keyframe
keyframe相当于普通CSS样式的rule，所以keyframe对象才有 style 属性，可以用来进行修改

Answer 4

<style>
  .box {
    width: 100px;
    height: 100px;
    margin: 20px auto;
    background-color: #75c934;
    text-align: center;
    line-height: 100px;
    font-size: 18px; /*过渡效果*/
    transition: transform 0.8s;
  }
  .box:hover {
    /*旋转80°*/
    transform: rotate(80deg);
  }
</style>
<div class="box">
</div>