Q46: How does @starting-style enable entry transition animations for display: none elements?
Historically, transitioning elements from display: none to display: block skipped entry animations because there was no initial render state to interpolate from. @starting-style defines initial style properties before an element enters the DOM render tree, enabling clean entry transitions.
Entry Transitions for Modals
.dialog {
opacity: 1;
transition: opacity 0.3s ease, display 0.3s allow-discrete;
@starting-style {
opacity: 0;
}
}💡 @starting-style sets opacity to 0 when entering the DOM, allowing transition to animate cleanly to opacity 1.
Key Takeaways
- Defines starting animation property values for newly rendered elements.
- Enables smooth entry transitions when toggling elements from
display: none.
Knowledge Check
What challenge does @starting-style solve in CSS transitions?