js动态修改@keyframes属性值

CSS3中增加了@keyframes规则用于创建动画，创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。也就是说通过改变CSS样式而达到动画的效果，所以，要动态去改变动画，只有修改样式。
document.styleSheets这个接口可以获取网页上引入的link样式表和style样式表。如下：

拿到样式表后就可以操作样式啦~
insertRule方法用来给当前样式表插入新的样式规则。举个栗子：

insertRule(rule,index)

• rule ：要添加到样式表的规则。
• index：要把规则插入或附加到 cssRules 数组中的位置。

js既然可以改变样式了，那传值就方便啦！

var param = 20;
var style = document.styleSheets[0];
style.insertRule("@keyframes rotate_before{from{ transform: translate(0%,0%); }to{ transform: translate(0%,-"+param +"%);}}",9);//写入样式

根据具体需求传值并修改样式就酱。