CSS transition: all breaks reveal animations for elements visible on page load

Issue Report

If elements that are visible within the viewport when the page loads have a transition: all property defined in CSS, the reveal effect does not happen. Instead, those elements instantly become visible at their ending state, without an animation.

In the attached demos, you can see the right column of buttons (with transition: all) instantly become revealed, while the left column (with transition: all replaced with the more specific transition: background-color) have the expected reveal animation.

Curiously, this issue only seems to affect elements visible on page load. If you scroll down, all of the buttons have the expected reveal animation .

Demos

• JS Bin: https://jsbin.com/deloroyike/edit?html,css,js,output
• CodePen (same code): https://codepen.io/markmercier/pen/zYdrbgR

Environment

• Operating System: Mac OSX v10.15.7
• Browser Version: Chrome, Safari, Firefox, Edge (latest)
• ScrollReveal Version: 4.0.9