0

私はcss3でアニメーションを持っています

@keyframes aia2{
from{ opacity:1}
to{ opacity:0}
}/* similar with other prefixes */



.animate{
-webkit-animation: aia2 5s linear infinite alternate;
   -moz-animation: aia2 5s linear infinite alternate;
    -ms-animation: aia2 5s linear infinite alternate;
     -o-animation: aia2 5s linear infinite alternate;
        animation: aia2 5s linear infinite alternate; 
}

html

<ul>
<li class="item" id="term1">1</li>
<li class="item" id="term2">2</li>
<li class="item" id="term3">3</li>
</ul>

Li をアニメーション化する必要がありますが、機能していません

$(".item").removeClass("animate");
$(specified id).addClass("animate");

an li に animate クラスを追加し、他の li タグを削除しています。

私もsetTimeoutで試しましたが、役に立ちませんでした。

どうすれば入手できますか？

4

3 に答える 3

1

クラスを追加および削除する代わりに、アニメーションの再生状態を変更します。css3animation-play-stateプロパティの使用

参照

https://developer.mozilla.org/en-US/docs/CSS/animation-play-state

于 2013-02-19T11:33:17.793 に答える
0

これを使用する場合： 

@keyframes aia2{
     0%   { opacity: 1; }
     50%  { opacity: 0.5; }
     100% { opacity: 0; }
    }

@-moz-keyframes、@-webkit-keyframes、および @-o-keyframes をさまざまなキットに使用できます。

あなたはここで私のテストを見つけることができ、それは永遠に続いています

于 2013-02-13T13:41:48.477 に答える
0

実際、これは機能します。ただし、一度だけ:

CSS

@keyframes myfirst
{
from {opacity: 0;}
to {opacity: 1;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {opacity: 0;}
to {opacity: 1;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {opacity: 0;}
to {opacity: 1;}
}

@-o-keyframes myfirst /* Opera */
{
from {opacity: 0;}
to {opacity: 1;}
}

.animate{
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-direction: linear;
    -webkit-animation-timing-function: infinite;
}

HTML

<ul>
    <li class="item animate" id="term1">1</li>
    <li class="item" id="term2">2</li>
    <li class="item" id="term3">3</li>
</ul>

フィドル: http://jsfiddle.net/praveenscience/ACUEg/

于 2013-02-13T14:01:50.207 に答える