Kevin Powell - Community•14mo ago

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:

2 Replies

AugustosOP•14mo 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

MarkBoots•14mo 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

Gaming

Programming

Animation when things are loaded, tailwind with reactjs