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为小提琴看，你需要创建新的关键帧每班。