jquery @keyframes 动态添加

需要写一个css3的动画效果，且需要按着写的事件同事进行需控制样式

css代码

                @keyframes spin1 {
				0% {
					transform: rotate(225deg);
				}
				50% {
					transform: rotate(225deg);
				}
				100% {
					transform: rotate(405deg);
				}
			}
			
			@keyframes spin2 {
				0% {
					transform: rotate(225deg);
				}
				50% {
					transform: rotate(405deg);
				}
				100% {
					transform: rotate(405deg);
				}
			}

	var tt=document.styleSheets[0];
				//tt.deleteRule(6);//清除之前写入的动画样式
				console.log(tt);
				tt.insertRule("@keyframes spin1 { 0% { transform: rotate(225deg); } 50% { transform: rotate(225deg); } 100% { transform: rotate(405deg); } }",9);//写入样式
				tt.insertRule("@keyframes spin2 { 0% { transform: rotate(225deg); } 50% { transform: rotate(405deg); } 100% { transform: rotate(405deg); } }",10);//写入样式

				

XML DOM insertRule() 方法
CSSStyleSheet 对象参考手册

insertRule() 方法详解