通过vue来添加动画和修改@keyframes属性值

CSS3中增加了@keyframes规则用于创建动画，创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。也就是说通过改变CSS样式而达到动画的效果，所以，要动态去改变动画，只有修改样式。
你可以打印一下document.styleSheets，console.log(document.styleSheets)，会发现document.styleSheets是一个对象数组。
拿到样式表后就可以操作样式啦~
insertRule方法用来给当前样式表插入新的样式规则。举个栗子：

var style = document.styleSheets[1];
console.log('styleSheets',document.styleSheets)
style.insertRule(`@keyframes example {0%{transform: scale(1);} 100% {transform: scale(0.2); top:${top}px; left:${left}px;}}`,0);//写入样式

这样就可以完成@keyframes的添加或修改啦！