This came up in Slack. The Hero text of the https://github.com/features/codespaces page (and others) use a staggered animation effect. But when prefers-reduced-motion: reduce is enabled, the animation-delay was still active, causing the text to somewhat still be animated (in a very basic form):
btw. what's the reason of using animation-duration: 0.01ms !important and not just disabling it with the shorthand animation: none !important. Then animation-delay would be disabled too.
Urgency
Not urgent at all. We'll add a separate override in the meantime.
Problem
This came up in Slack. The Hero text of the https://github.com/features/codespaces page (and others) use a staggered animation effect. But when
prefers-reduced-motion: reduceis enabled, theanimation-delaywas still active, causing the text to somewhat still be animated (in a very basic form):https://github.com/user-attachments/assets/9eff0083-e186-433b-b497-cf0b3b80ec37
Suggestion
Might be a good idea to include
animation-delayandtransition-delayin the reset: https://github.com/primer/brand/blob/b5964876df40cea02d8ffdab50641a4a3ff8a627/packages/react/src/css/reset.css#L73-L80.btw. what's the reason of using
animation-duration: 0.01ms !importantand not just disabling it with the shorthandanimation: none !important. Thenanimation-delaywould be disabled too.Urgency
Not urgent at all. We'll add a separate override in the meantime.