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() 方法詳解