css - css3 simple animation not working -

css - css3 simple animation not working -

i have animation css3

@keyframes aia2{ from{ opacity:1} to{ opacity:0} }/* similar 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 animate li not working

$(".item").removeclass("animate"); $(specified id).addclass("animate");

i adding animate class li , removing other li tags.

i tried settimeout, no use.

how can it?

instead of adding , removing classes alter animation play state. using css3 animation-play-state property

reference

https://developer.mozilla.org/en-us/docs/css/animation-play-state

css css3