So apparently Firefox can't handle (quick) animations from opacity 0 to opacity greater-than-zero and glitches around. Instead you need to animate starting from something greater than 0, like 0.001.

I had to debug this shit and it just adds to my reasons to dislike this browser.

As a person who uses Firefox daily for web development, I have never heard or experienced this problem. Huh

@lamka02sk maybe I should be more specific. It's repeating SVG frames that shift between opacity 0 and 1. It works in Firefox if you hover over it, otherwise it just flickers. Opacity 0.0001 fixes that.

Maybe there's some kind of optimization that unintentionally makes matters worse here.

@Meta maybe somethings not firing last moment?

Yo do your animated element has children that are not text nodes

@lamka02sk Same.

Use animate.css and aos.js and just standard CSS transition like all the time.

Firefox is my daily driver.

Actually was even recently working on a fast opacity transition to zero, because I wanted the content to fade out quickly before being scrolled into the top bar...

Worked fine down to 100ms.

It did seem to “blink out” after that, but it may just be my eye unable to detect the animation at that speed. And I mean, who really needs a 100ms transition anyway... the eye sees maybe 3 frames of it.

Anyway, far as I can tell FF is fine animating opacity.

Note: this is using opacity and NOT moz-opacity.