New CSS Rule to Prevent FOUC
Using CSS to animate elements when they first appear in the DOM has always been a little tricky. You could some Javascript workarounds or animation libraries, but that has always felt a little clunky.
The New @starting-style Rule
The new @starting-style rule is a game-changer that allows you to define the initial state of an element before its first style update, so your entry animations are smooth.
Without this, when an element is added to the page (or its display changes from none to block), browsers apply the new styles instantly, which causes yucky FOUC. Even if you have a transition: opacity set, the browser doesn't have a before state to transition from. It just jumps from non-existent to fully visible.
The @starting-style at-rule provides that missing before state. It tells the browser: the moment this element starts existing, pretend it has these styles so you can transition to its actual styles.
Here's the basic rule syntax:
Why is this better?
- No Javascript Needed: You don't need to use requestAnimationFrame or setTimeout to trigger an entry animation.
- Performance: CSS transitions are usually more performant than JS-driven animations.
- Cleaner Code: Your animation logic stays in your stylesheet, instead of in your scripts.
Example: Animating display: none
Until now you couldn't really transition the display property. If you changed a class from display: none to display: block, the transition would fail because display is not a property that can be animated.
By combining @starting-style with the new transition-behavior: allow-discrete property, we can now animate elements like this.
- @starting-style: Sets the "zero-frame" values (e.g., opacity: 0) for the transition to start from.
- transition-behavior: Allows discrete properties (like display) to wait for the transition to finish.
- @keyframes (Alternative): Still great for loops, but @starting-style is better for simple state entries.
Here's an example with popover (which is also new!) and modals, using @starting-style and transition-behavior.
As of 2024, @starting-style is working in Firefox, Chrome, Edge, and Safari. It is part of a new set of CSS features (like the Popover API and Anchor Positioning) designed to handle UI states that used to require Javascript. Pretty neat.
