CSS has been on fire lately, with tons of great new features. @starting-style is an interesting one; it allows us to use CSS transitions for enter animations, something previously reserved for CSS keyframe animations. But is the juice worth the squeeze?

Josh W. Comeau's platform provides resources in frontend development, React.js, and CSS, offering insightful articles, tutorials, and code examples. With a focus on accessible and creative web development techniques, Josh W. Comeau empowers developers to craft engaging user experiences and solve complex problems in the world of web development.

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.

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

Link to this heading The specificity problem

Link to this heading An exciting announcement

<p>The explanation of @starting-style limitations and intelligent fixes like using CSS custom properties or falling back to keyframes is highly useful. These tips empower SaaS developers to overcome animation quirks and elevate their UI polish effortlessly.</p>
