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