css3简单的动画不起作用

Question

我有一个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，没用。

我怎么能得到它？

Answer 1

而不是添加和删除类更改动画播放状态。使用css3 animation-play-state属性

参考

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

Answer 2

如果你使用它：

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

您可以将@ -moz-keyframes，@ -webkit-keyframes和@ -o-keyframes用于不同的套件

你可以找到my test here并且它会一直持续

Answer 3

实际上，这是有效的。但只有一次：

<强> 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/