Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Sequential CSS3 animation

Sequential CSS3 animation

Problem

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

HTML would be something like this:

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  • item 6
  • item 7
  • item 8
  • item 9
  • item 10
  • item 11
  • item 12
  • item 13
  • item 14
  • item 15

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!

Problem courtesy of: Stijn_d

Solution

This would work:

HTML:

  • item 1
  • item 2
  • item 3

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/

Solution courtesy of: Jonas

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Sequential CSS3 animation

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×