React Transition Group: Offset animation start tim

Question

I just started playing around with React Animations, and I seem to be stuck.

I have a series of Cards that appear (animate-in). Right now, they're all coming in at the same time (the animation plays at the same time). Is there a way to add an offset to the animation so that they play one after the other?

Animate = React.addons.CSSTransitionGroup
<Animate transitionName="cardAnim" transitionAppear={true}>
            {
                courses.map(function(element, index){
                    return (
                        <Card style={CardStyle} key={index}>
                            <CardMedia>
                                <img src={"img/courses/" + index + ".png"} />
                            </CardMedia>
                            <CardTitle>
                                {element}
                            </CardTitle>
                        </Card>
                    )
                })
            }
    </Animate>

My aim: I want each Card to animate in separately, as in, the second card animates in after the first one has entered, the third animates after the second one is done, and so on.

Can anyone help? Thanks :)

Answer 1

All right, so I figured it out. The key was the animation-fill-mode CSS property. I completely removed all React Animations and proceeded to figure it out using CSS only.

Here's the code, if anyone is interested:

CSS:

@keyframes flyInFromBottom {
0%{
    opacity: 0;
    transform: translateY(100vh);
}
100%{
    opacity: 1;
}

}

JSX:

<Card style={{
              animation: 'flyInFromBottom 0.3s ease ' + (index+1)*0.1 + 's',
              float: 'left',
              width: 'calc(50% - 4px)',
              margin: '2px',
              opacity: '0',
              animationFillMode: 'forwards'
            }}
            key={index} onTouchTap={this.goToCourse}>
            <CardMedia>
                 <img src={"img/courses/" + index + ".png"} />
            </CardMedia>
            <CardTitle>
                  {element}
            </CardTitle>
</Card>

Essentially, I changed properties using CSS and persisted them using animation-fill-mode.