如何用js动态的添加和删除动画

CSS3中的@keyframes用于创建动画，改变写入其中的css样式的值。

想要改变动画内的值就要通过删除之前的动画并新建一个相同名字的动画。

想要实现可以用document.styleSheets

//添加动画
style.insertRule(`@keyframes zhuan{from{transform:rotate(0deg);}to{transform:rotate(360deg)}}`,0);
//删除动画
document.styleSheets[0].deleteRule(0);

insertRule（rule,index）

rule:要添加的样式。

inedx:插入的位置

此代码写的是添加名字为zhuan的动画，位置为0。

主要是通过这位博主学到的知识：

js动态修改@keyframes属性值_三三-CSDN博客