CSS（或 JQuery）改变颜色动画 onclick答案

【问题标题】：CSS (or JQuery) change color animation onclickCSS（或 JQuery）改变颜色动画 onclick
【发布时间】：2012-11-18 00:46:18
【问题描述】：

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 方式来执行此操作？

【问题讨论】：

无需创建新样式表。只需为每种颜色创建一个不同的类，并使用 jQuery 来.addClass() 和.removeClass()
我明白你的意思。但是我将如何更改关键帧？他们需要指定不同的颜色
表示Opera是：-o-animation:myfirst 3s; -o-animation-iteration-count：无限；问候

标签： jquery css animation colors

【解决方案1】：

无需创建新样式表。只需为每种颜色创建一个不同的类，并使用 jQuery 来.addClass() 和.removeClass()：

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

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

正如您将在该小提琴的 CSS 中看到的那样，您需要为每个类创建新的关键帧。

【讨论】：