CODEWITHSUNDEEP
animationcsssequential
Stijn_d
Stijn_d

Reputation: 1078

Sequential CSS3 animation

I'm wondering if it is possible to fade in a list of items sequentially using CSS3 only?

HTML would be something like this: 

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>

    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>

    <li>item 11</li>
    <li>item 12</li>
    <li>item 13</li>
    <li>item 14</li>
    <li>item 15</li>
</ul>

And when the UL gets the class "fadeout" it would be cool if first "item1" fades out (during 2 seconds) once this is finished fade out the next one("item2") and so on until all items are faded out.

I know how to do this using jQuery but it would be nice if this was possible using CSS3 only? Any ideas if this could be possible?

EDIT: I'm really looking for a solution that also works when you don't know how many items are in the list. it could be 1 it could be a 100?

EDIT: Apparently making this for a variable amount of elements is impossible using CSS only, so the best CSS solution is for a fixed number of items. Otherwise you will have to use JS.

Thx for the responses!

Upvotes: 2

Views: 6164

Answers (2)

Jonas
Jonas

Reputation: 588

This would work:

HTML:

<ul class="fadeout">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

CSS:

ul.fadeout li:nth-child(1){
    -webkit-animation: fadeOut 2s linear forwards;
}
ul.fadeout li:nth-child(2){
    -webkit-animation: fadeOut 2s linear 2s forwards;
}
ul.fadeout li:nth-child(3){
    -webkit-animation: fadeOut 2s linear 4s forwards;
}
ul.fadeout li:nth-child(1){
    -webkit-animation: fadeOut 2s linear forwards;
}
@-webkit-keyframes fadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

http://jsfiddle.net/fGAZr/

Upvotes: 4

methodofaction
methodofaction

Reputation: 72385

This is something I wouldn't recommend, as with all the vendor extensions it would get extremely verbose. It would be possible to auto-generate the code with scss, but I wouldn't bother.

ul li { transition: opacity 200ms linear;}
ul.fadeout li {opacity: 0;}

ul.fadeout li:nth-child(1)  { transition-delay: 0    }
ul.fadeout li:nth-child(2)  { transition-delay: 0.1s }
ul.fadeout li:nth-child(3)  { transition-delay: 0.2s }
ul.fadeout li:nth-child(4)  { transition-delay: 0.3s }
ul.fadeout li:nth-child(5)  { transition-delay: 0.4s }
ul.fadeout li:nth-child(6)  { transition-delay: 0.5s }
ul.fadeout li:nth-child(7)  { transition-delay: 0.6s }
ul.fadeout li:nth-child(8)  { transition-delay: 0.7s }
ul.fadeout li:nth-child(9)  { transition-delay: 0.8s }
ul.fadeout li:nth-child(10) { transition-delay: 0.9s }
ul.fadeout li:nth-child(11) { transition-delay: 1s   }
ul.fadeout li:nth-child(12) { transition-delay: 1.1s }
ul.fadeout li:nth-child(13) { transition-delay: 1.2s }
ul.fadeout li:nth-child(14) { transition-delay: 1.3s }
ul.fadeout li:nth-child(15) { transition-delay: 1.4s }

You can view a webkit only example here: http://jsfiddle.net/kUQj7/

Upvotes: 4

Related Questions