Is there a way to have for example a div that fades in and out (to use for alternating through different backgrounds let's say). And have its childen (text lets say) at full opacity all the time?

{transitions((style, 
<animated.div
  class={
  bg[i]   " bg-fixed bg-cover absolute h-full w-screen bg-no-repeat"
  }
  style={{
  ...style,
  }}
 >
   <TextComponentHere/>
</animated.div>
))}

CodePudding user response：

As a matter of fact, you can. Instead of using opacity: 0.8, you should use rgba(255, 0, 0, 0.8). Opacity generally refers to all of the parents children, while rgba values can be set for just a specific element, and have it's children be set otherwise.