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 并删除其他 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 回答