Add SIngle Class for Multiple CSS Transitions

Add single class to element to trigger CSS transitions on multiple child elements.

by the_voder

HTML

<section>
    <div id="div1">Blah</div>
    <div id="div2">Blah</div>
    <div id="div3">Blah</div>
</section>

CSS

/* Start opacity for child elements */
section div {
    opacity: 0;
}

/* Transitions, with delays */
section #div1 {
    transition: opacity 1s ease;
}
section #div2 {
    transition: opacity 1s ease;
    transition-delay: 1s;
}
section #div3 {
    transition: opacity 1s ease;
    transition-delay: 2s;
}

/* Opacity when class applied to parent */
section.current #div1,
section.current #div2,
section.current #div3 {
    opacity: 1;
}

JavaScript

$(document).ready(function() {
    // Add class
    $("section").addClass("current");  
    // Wait, then remove class
    setTimeout(function() {
        $("section").removeClass("current");
    }, 6000);
});