Bug 122922 – animations are consecutive and not concurrent with pseudo :checked state

• Status: UNCONFIRMED
• Component: Animations

[Aaron Reisman]

when taking advantage of css's :checked state, the animations in the example provided are consecutive not concurrent as they should be.

[Antoine Quint]

The example actually does not seem to animate anything in either Chrome, Firefox or Safari. I'm closing this, but please re-open this with additional information.

[Aaron Reisman]

(In reply to Antoine Quint from comment #1)
> The example actually does not seem to animate anything in either Chrome,
> Firefox or Safari. I'm closing this, but please re-open this with additional
> information.

please take a look again apparently something about the transition spec changed within the last 10 years, but the issue is still present.

[Aaron Reisman]

(In reply to Aaron Reisman from comment #2)
> (In reply to Antoine Quint from comment #1)
> > The example actually does not seem to animate anything in either Chrome,
> > Firefox or Safari. I'm closing this, but please re-open this with additional
> > information.
> 
> please take a look again apparently something about the transition spec
> changed within the last 10 years, but the issue is still present.

if it wasn't clear, I've updated the nessasary changes to the codepen link.

[Antoine Quint]

Thanks for this Aaron. I see the same behavior across Chrome 112.0.5615.49, Firefox 112.0 and Safari Technology Preview 167 where as one item closes first, and then the newly-selected item opens. Is there something I'm missing in the Safari behavior where it would differ? Are all browsers incorrect?

[Aaron Reisman]

I guess I would expect the state transition to happen as one animation because the checked state changes together. If you wanted to add delay it could easily be done with the transition delay property in CSS.