Streaming live at 10am (PST)

Firefox Animations not working properly

Hey Guys!

Just finished my work on a clients Website. Site works perfectly on chrome and Safari. Even Edge!
But it is something different with firefox.

My read only is attached. The lyrics Text and gallery have a fade in animation on page load. They appear from opacity:0 and a blur to opacity:100 and blur:0. But nothing is happening on firefox. They just appear without any transition. How can I fix this? I´m not using any legacy interactions here. Only simple 0-100% opacity fade on page load. This drives me crazy!!!

On the other hand, talking about the landing page (home) the dragable Mask appears last. So the background fades in and then is overlapped bei the Mask overlay. This doesn´t make sense, because the Overlay has no transition at all and should be there all the time! I fixed this by giving the background transition a short delay, but this is not best practice!

Please help asap!!


Here is my site Read-Only: https://preview.webflow.com/preview/marie-riedel?utm_medium=preview_link&utm_source=designer&utm_content=marie-riedel&preview=a648e717e99a0938017df9fd7f537fb6&pageId=5d5aa72983100b2f050a447f&itemId=5d5aa7538602db611d9cfa06&mode=preview