Css3 délai de transition

Question

Je suis en train de faire la transition séquentielle délai d'opacité:

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

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

Maintenant, ils ont tous fondu à la fois, je voudrais un fondu séquentiel.

Est-il possible avec juste css?

Answer 1

Oui, c'est possible.

Vous pouvez utiliser la propriété de délai de transition: 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/

Fo r à travailler sur les enfants n, vous devez utiliser javascript comme ceci:

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/