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;}
}

See my jsFiddle (DOES NOT WORK WITH IE OR OPERA). Or see the CSS above.

Its a simple color animation that goes from red to dark red, and back to red. I need to make it such that when the button is clicked it will go from:

blue to #000066 and then back to blue.

I know one method is to create a new style sheet and switch stylesheets but,

(1) I’m not quite sure how to do that

and

(2) In the grand scheme of all of this I need to repeat this about 15 times with different colors, I would hate to have 15 different stylesheets for colors. Is there a JQuery or straight up javascript way of doing this?

Answer 1

No need to create a new stylesheet. Just create a different class for each color, and use jQuery to .addClass() and .removeClass():

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

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

As you’ll see in the CSS for that fiddle, you’ll need to create new keyframes for each class.