css3 simple animation not working - css

Question

I have an animation with 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>
I need to animate li but it is not working
$(".item").removeClass("animate");
$(specified id).addClass("animate");
I am adding animate class to the an li and removing for other li tags.
I also tried with setTimeout, no use.
how I can get it?

Answer 1

Instead of adding and removing classes change animation play state. using css3 animation-play-state property
reference
https://developer.mozilla.org/en-US/docs/CSS/animation-play-state

Answer 2

Actually, this works. But only once:
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>
Fiddle: http://jsfiddle.net/praveenscience/ACUEg/

Answer 3

and if you use this:
#keyframes aia2{
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 0; }
}
and you could use #-moz-keyframes, #-webkit-keyframes and #-o-keyframes for the different kits
you can find my test here and it's going on forever