js动态修改@keyframes属性值

CSS3中增加了@keyframes规则用于创建动画,创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。也就是说通过改变CSS样式而达到动画的效果,所以,要动态去改变动画,只有修改样式。
document.styleSheets这个接口可以获取网页上引入的link样式表和style样式表。如下:
js动态修改@keyframes属性值_第1张图片
拿到样式表后就可以操作样式啦~
insertRule方法用来给当前样式表插入新的样式规则。举个栗子:
js动态修改@keyframes属性值_第2张图片

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);//写入样式

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

你可能感兴趣的:(JS/jQ)