Bootstrap: Collapse not animated in Firefox >= 63 with Bootstrap >= 4.1

[nurkka]

The collapse animation doesn't work in Firefox >= 63 with Bootstrap >= 4.1.
It works smoothly in Firefox < 63 and/or with Bootstrap 4.0.

Environment

* The Bootstrap website, versions 4.0, 4.1, 4.2. 4.3
* Browser: Firefox versions 62, 63, 64, 65

Test Case for reproduction

* Visit https://getbootstrap.com/docs/4.3/components/collapse/
* See that collapse isn't animated in Firefox >= 63
* See that collapse works smoothly in Firefox < 63

* Visit https://getbootstrap.com/docs/4.0/components/collapse/
* See that collapse works smoothly in Firefox (all tested versions)

Notes
This issue is posted here because previous Bootstrap versions do not show the problem, specifically

* No problem exists with Firefox <= 62 and all tested Bootstrap versions
* No problem exists with all tested Firefox versions and Bootstrap <= 4.0

[ysds]

See https://getbootstrap.com/docs/4.3/getting-started/accessibility/#reduced-motion and Firefox 63+ supports prefers-reduced-motion.

[patrickhlauke]

If you're on Windows, it's likely that you at some point turned "Ease of access > Show animations" on (by accident or otherwise).

If you did that to just suppress animation effects in Windows itself (rather than as a preference for all apps/sites/etc, which browsers like Firefox now respond to), you should - confusingly enough, but that's a problem with Windows - go to "Control Panel\Ease of Access\Ease of Access Centre\Make the computer easier to see > Make things on the screen easier to see > Turn off all unnecessary animations (when possible)" and just check that instead (while leaving the "Ease of access > Show animations" option unchecked)

[nurkka]

I tested this on Browserstack. I think it's very likely, that Browserstack would disable animations for performance reasons. The Windows settings you described worked perfectly.
Many thanks!

[oCcSking]

It can be done with CSS like Robson Sanches show here something like

.collapsing { transition:height 0.35s ease !important; }

but i like more Chris Ferdinandi answare that

This is exactly how Bootstrap should work given the user's state preference of not seeing animations..