Not able to do rendering delay in css-grid-animation? - css

Question

I am using animate-css-grid and React library to build my portfolio in a grid design, I kind of achieved what I wanted here is the pen link.
But when I click any of the boxes, the text which should go with the box rendered instantaneously. I want it to render after the box get scaled up.
this is piece code which I am using in rendering the text.
class Card extends React.Component {
state = { expanded: false };
randomNumber = Math.floor(Math.random() * 5) + 1;
render() {
return (
<div
style={{ backgroundColor: this.props.color }}
class={`card card--${this.randomNumber} ${
this.state.expanded ? "card--expanded" : ""
}`}
onClick={() => {
this.setState({ expanded: !this.state.expanded });
}}
>{this.state.expanded ? <Text /> :
(<div>
{/* <div className="card__avatar" />
<div className="card__title" /> */}
<div className="card__description">
{this.props.subject}</div>
</div>)}
</div>
);
}
}
I am rendering the Text component at the time it gets the expanded state true.
I don't know how to delay it. The animate-css-grid library provides custom configuration but I am unable to understand how to use it. Can anybody who is familiar with CSS animations help me out here, please.

Answer 1

I added a className around what <Text /> returns and trigger an animation to reveal the text when the --card-expanded className is present. The delay of 500ms feels good to me, but it's, of course, adjustable.
.card-text {
opacity: 0;
}
.card--expanded .card-text {
animation: 1s show-text forwards 500ms;
}
#keyframes show-text {
to {
opacity: 1;
}
}
CodePen