js控制 @keyframes,实现鼠标移入移出无卡顿效果

var style = document.styleSheets[0]

console.log(style)

document.styleSheets这个接口可以获取网页上引入style样式表。

拿到样式表后就可以 *** 作样式啦~

insertRule方法用来给当前样式表插入新的样式规则。

insertRule(rule,index)

rule:要添加到样式表的规则。

index:要把规则插入或附加到 cssRules 数组中的位置。

js既然可以添加 @keyframes 样式了，那动态传值就方便啦！

附实战笔记一篇

CSS3动画以百分比表示关健帧，你可以随意从0％－100％自己定义每个关健帧的动作。0％就是开始，100％就是结束。

@-webkit-keyframes anime {

0%{把样式写这里}

50%{把样式写这里}

100%{把样式写这里}

}

//dropCoin 是动画名称。

var dropX = xxx //自定义的值

var dropY = yyy //自定义的值

var style = document.styleSheets[0]

var amt = [

"@keyframes dropCoin {

0% { -webkit-transform: translateY(0px)transform: translateY(0px)}

100% { -webkit-transform: translateY("+dropY+"px)transform: translateY("+dropY+"px)}

}",

]

for(var i = 0i<amt.lengthi++){

style.insertRule(amt[i],i+200) //注意修改200这个值

}

---