The Big Gotcha With @starting-style • Josh W. Comeau

The @starting-style CSS at-rule allows transitions for enter animations but has a significant specificity gotcha. Unlike keyframe animations, @starting-style declarations aren't promoted to a higher priority group, causing them to lose to more specific selectors. This creates unexpected behavior where animations fail to run when conflicting with inline styles or higher-specificity selectors. The post explores three solutions: using !important (not recommended), CSS custom properties (elegant but complex), or falling back to keyframe animations (simple and reliable). The author questions whether @starting-style offers real advantages over existing keyframe animations.