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

私のjsFiddleを参照してください（IEまたはOPERAでは動作しません）。または、上記の CSS を参照してください。

赤から濃い赤に変わり、赤に戻るシンプルなカラー アニメーションです。ボタンをクリックすると、次のようになるようにする必要があります。

青から #000066 に戻り、青に戻ります。

新しいスタイルシートを作成してスタイルシートを切り替える方法があることは知っていますが、

(1) やり方がよくわからない

と

(2) このすべての壮大なスキームでは、これをさまざまな色で約 15 回繰り返す必要があります。これを行うJQueryまたはまっすぐなJavaScriptの方法はありますか?

4

1 に答える 1

4

新しいスタイルシートを作成する必要はありません。色ごとに異なるクラスを作成し、jQuery を使用して次のように.addClass()し.removeClass()ます。

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

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

そのフィドルの CSS でわかるように、クラスごとに新しいキーフレームを作成する必要があります。

于 2012-11-29T20:49:52.853 に答える