CODEWITHSUNDEEP
css-transitionsdelay
Toniq
Toniq

Reputation: 5016

Css3 transition delay

I am trying to make sequential delay for opacity transition:

$('.wrapper').children('div').each(function(){
    $(this).removeClass('hidden').addClass('visible');               
});

http://jsfiddle.net/7HgLK/5/

Now they all fade at once, I would like a sequential fade.

Is it possible with just css?

Upvotes: 0

Views: 1131

Answers (1)

Dominik König
Dominik König

Reputation: 124

Yes it is possible.

You can use the transition delay property: http://www.w3schools.com/cssref/css3_pr_transition-delay.asp

HTML:

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

CSS:

.first {
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
}
.second {
    -webkit-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -o-transition-delay: 1s;
    -ms-transition-delay: 1s;
    transition-delay: 1s;
}
.third {
    -webkit-transition-delay: 2s;
    -moz-transition-delay: 2s;
    -o-transition-delay: 2s;
    -ms-transition-delay: 2s;
    transition-delay: 2s;
}

http://jsfiddle.net/je9p5/

For it to work on n children you have to use javascript like so:

Javascript:

$('.wrapper').children('div').each(function(index, value) {
    .css('-webkit-transition-delay', index + 's')
    .css('-moz-transition-delay', index + 's')
    .css('-ms-transition-delay', index + 's')
    .css('-o-transition-delay', index + 's')
    .css('transition-delay', index + 's');
});

http://jsfiddle.net/4x6wC/

Upvotes: 1

Related Questions