Reputation: 13
Hello on page load of a react component I would like text elements to fade in one after another.using css preferably.
Example:
<h1 className='hi'>Hi</h1> (fades in)
Then
<p className='boo'>boo</p> (fades in)
<p className='woo'>woo</p> (fades in)```
Any help is appreciated!
Upvotes: 0
Views: 890
Reputation: 13678
Here's an example of how to define an animation in CSS, and then render a list with progressively longer animation start delays based on index:
const FadeList = () => {
const listItems = ['Stantz', 'Spangler', 'Venkman', 'Zeddmore'];
return (
<ul>
{listItems.map((item, idx) => (
<li className="fade-list-item" style={{ animationDelay: `${500 * idx}ms` }}>{item}</li>
))}
</ul>
);
}
ReactDOM.render(
<FadeList />,
document.getElementById("react")
);
.fade-list-item {
opacity: 0;
animation-name: fadein;
animation-duration: 500ms;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>
Upvotes: 1