@starting-style
Allows you to define the initial styles for an element for its 'entry' animation. This is a game-changer because it lets you animate elements (like modals or dropdowns) as they are added to the DOM without using JavaScript timeouts.
Quick example
div {
transition: opacity 0.5s, transform 0.5s;
opacity: 1;
transform: scale(1);
/* Styles applied the moment the element is created/displayed */
@starting-style {
opacity: 0;
transform: scale(0.9);
}
}@starting-style Browser Support
Newly available Since 2024 87% global usage
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
117+
129+
17.5+
117+