CODEWITHSUNDEEP
css
user1834809
user1834809

Reputation: 1311

css3 simple animation not working

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?

Upvotes: 0

Views: 104

Answers (3)

kongaraju
kongaraju

Reputation: 9596

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

Upvotes: 1

Daan Geurts
Daan Geurts

Reputation: 449

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

Upvotes: 0

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

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/

Upvotes: 0

Related Questions