js动态修改@keyframes属性值
CSS3中增加了@keyframes规则⽤于创建动画，创建动画的原理是，将⼀套 CSS 样式逐渐变化为另⼀套样式。也就是说通过改变CSS样式⽽达到动画的效果，所以，要动态去改变动画，只有修改样式。
document.styleSheets这个接⼝可以获取⽹页上引⼊的link样式表和style样式表。如下：
拿到样式表后就可以操作样式啦~
rotate属性
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);//写⼊样式
根据具体需求传值并修改样式就酱。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。