// var rotate = document.querySelector('#rotate')
//此方法是找到动画属性名
function findKeyframesRule(animName) {
var rule;
var ss = document.styleSheets;
for (var i = 0; i < ss.length; ++i) {
for (var x = 0; x < ss[i].cssRules.length; ++x) {
rule = ss[i].cssRules[x];
if (rule.name == animName.id) {
console.log(rule)
return rule;
}
}
}
}
rotate.onclick = () => {
var keyframes = findKeyframesRule(rotate);
console.log(keyframes)
//此处调用方法,移除动画事件
keyframes.deleteRule("0%");
keyframes.deleteRule("100%");
//此处重新给动画赋名
document.querySelector('#rotate').style.webkitAnimationName = rotate;
//此处增加新的动画效果
keyframes.appendRule("0% { transform: rotate(" + 0 + "deg)}");
keyframes.appendRule("100% { transform: rotate(" + 10000 + "deg)}")
rotate.style.webkitAnimationDuration = 10 + 's'
}
js添加动画属性
最新推荐文章于 2024-06-30 15:38:14 发布