CSS3 animate one after another with delay

问题

Fiddle here -

I've got some divs that has some css3 transition. Is it possible to apply this transition not for every item at once but for example with 100ms delay after each another item?

#main div {
    opacity: 0;
    transition: 1s opacity;
}

#main.active div{
    opacity: 1;
}

So when I'll add .active class to #main, its children will change its opacity not at once, but one after another?

I know it can be easly done with

$('.setOfItems').each(function(i){ $(this).delay(100*i).doSth() })

But I'm looking for just css3 solution.

回答1:

you can use the transition-delay property. read more about it here , or here

Check out this Working Fiddle

by setting a differnet delay to different elements they will appear at different times. but the CSS is going to look messy if you'll set a bunch of different classes with different delays, so you should apply the delay from a Script (simmilar to what you suggested in your question).

if you have a small and constant number of elements, you can do it the ugly way (again: the best way is via script)

#main div:first-child
{
    transition: 1s opacity 200ms; /*BTW this is the short way of using transition with the duration, property, delay*/
}

#main div:nth-child(2)
{
    transition: 1s opacity 400ms;
}

#main div:nth-child(3)
{
    transition: 1s opacity 600ms;
}

etc..

回答2:

There is a way but it's not fully supported, please take a look on keyframes.

Then you will need to create each element different class.

来源：https://stackoverflow.com/questions/18763701/css3-animate-one-after-another-with-delay