Fade in section elements one after another in ReactJS

Question

I have two nice simple css classes like such:

.testimonial-body {
    -webkit-animation: fadein 3s;
}

@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

and a react class that contains multiple sections:

class Testimonials extends React.Component {
    render() {
        return (
            <div> 
                <h2>See what people are saying...</h2>
                <section className="testimonial-body" id="doug_and_sue">
                    <p>"Dependable, trustworthy, and expert workmanship all 
                        describe Kevin and his business.  
                        He completely transformed our condo, painting it from top to 
                        bottom, among other projects.
                        Not only does he do excellent work, but he's a 
                        pleasure to have in your home. For any future projects, 
                        there's no one we'd rather have than Kevin." 
                        <span class="testimonial-signature"> - Doug and Sue &sdot; Brookfield, WI</span>
                    </p>
                    <Gallery images={doug_and_sue_images} 
                                backdropClosesModal={true}
                                enableKeyboardInput={true}
                                enableImageSelection={false}/>
                </section>
                <section className="testimonial-body" id="section2">
                    <p>"This is another testimonial. This will probably contain
                        information such as how good his work was and stuff like that.
                        Blah blah blah blah blahhhhhhhhhhhhhhhhh."
                        <span class="testimonial-signature">- Some random dude &sdot; Somwhere, Anywhere</span>
                    </p>
                    <Gallery images={doug_and_sue_images} // will change
                             backdropClosesModal={true}
                             enableKeyboardInput={true}
                             enableImageSelection={false}/> 
                </section>
                <section className="testimonial-body" id="section3">
                    <p>"This is another testimonial. This will probably contain
                        information such as how good his work was and stuff like that.
                        Blah blah blah blah blahhhhhhhhhhhhhhhhh."
                        <span class="testimonial-signature">- Some random dude &sdot; Somwhere, Anywhere</span>
                    </p>
                    <Gallery images={doug_and_sue_images} // will change
                             backdropClosesModal={true}
                             enableKeyboardInput={true}
                             enableImageSelection={false}/> 
                </section>
                <section className="testimonial-body" id="section4">
                    <p>"This is another testimonial. This will probably contain
                        information such as how good his work was and stuff like that.
                        Blah blah blah blah blahhhhhhhhhhhhhhhhh."
                        <span class="testimonial-signature">- Some random dude &sdot; Somwhere, Anywhere</span>
                    </p>
                    <Gallery images={doug_and_sue_images} // will change
                             backdropClosesModal={true}
                             enableKeyboardInput={true}
                             enableImageSelection={false}/> 
                </section>
            </div>
        );
    }
}

export default Testimonials;

I would like each one of these sections to fade in individually. As of right now, all four sections fade in at the same time. I'm wondering what the best way to accomplish this is. The way I thought of doing it was to add each one of the ids to an array and loop through them then apply some sort of thread sleep, but I'm not sure if this is the best way to go about doing it.

Does anyone have any suggestions?

Answer 1

A simple solution is to use animation-delay, you can have different value for each of your section to have the fade-in animation start at different time.

https://www.w3schools.com/csSref/css3_pr_animation-delay.asp

Btw, there is no truly thread sleep in Javascript as Javascript is single threaded.