CSS（或JQuery的）改變顏色動畫的onclick

Question

div 
{ 
width:100px; 
height:100px; 
background:red; 
animation:myfirst 3s; 
-moz-animation:myfirst 3s; /* Firefox */ 
-webkit-animation:myfirst 3s; /* Safari and Chrome */ 
-webkit-animation-iteration-count: infinite; 
-moz-animation-iteration-count: infinite; 
} 


@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
0% {background:red;} 
50% {background:#800000;} 
100% {background:red;} 
} 

見my jsFiddle（不與IE和Opera工作）。或者看看上面的CSS。

它是一個簡單的彩色動畫，從紅色變成深紅色，然後變回紅色。我需要這樣做，當按鈕被點擊時，它將從：

藍色到＃000066，然後回到藍色。

我知道一個方法是創建一個新的樣式表，並切換樣式表，但是，

（1）我不太清楚該怎麼做

和

（2）所有這一切的宏偉計劃，我需要用不同的顏色重複這個約15次，我討厭有15種不同的顏色樣式表。有沒有一個JQuery或直接JavaScript的方式做到這一點？

Answer 1

無需創建新樣式表。只要創建爲每種顏色不同的類，並且使用jQuery .addClass()和.removeClass()：

function blueMe(){ 
    $('div').removeClass().addClass('blue'); 
}​ 

http://jsfiddle.net/mblase75/KHnBz/6/

正如你在CSS爲小提琴看，你需要創建新的關鍵幀每班。