Animation when things are loaded, tailwind with reactjs

It's bassicaly what the title say, i have a animation to when things are loading, but i want to animate when they appear on screen, like, in the current moment, they just pop on the screen, i want to add like a fade. use as example. this messages on chat:
No description
2 Replies
Augustos
Augustos12mo ago
consider the code to the chat: I loop over the chat array, find the prompts, and display the prompts, and the answers to that specific prompt, works great. But they just appear out of nowhere on the screen
No description
MarkBoots
MarkBoots12mo ago
add a css class that calls an animation for example
.fade-in {
animation: fadein 2s;
}
@keyframes fade-in {
from {
opacity: 0;
}
}
.fade-in {
animation: fadein 2s;
}
@keyframes fade-in {
from {
opacity: 0;
}
}
here the element will be added to the dom, but it will start with an opacity of 0 and animate to the default. you can do this with what ever property you want
Want results from more Discord servers?
Add your server