Intermediate LevelCSS & Modern Layouts
What does @starting-style do for CSS entry animations?
❓ Interview Prompt: Explain @starting-style for animating elements from display: none to visible.
Previously, CSS could not animate an element appearing from display: none because there was no "before" state for the transition engine. @starting-style defines the starting state for entry animations:
How It Works:
1
Element starts hidden (
display: none).2
@starting-style defines the initial animation state (e.g., opacity: 0).3
When the element becomes visible, it transitions from the starting-style to the normal style.
Combined with transition-behavior: allow-discrete:
Enables transitioning discrete properties like display and overlay.
Code Implementation Example
css
.dialog {
opacity: 1;
transform: translateY(0);
transition: opacity 0.3s ease, transform 0.3s ease,
display 0.3s ease allow-discrete;
}
/* Define the "from" state for entry animation */
@starting-style {
.dialog {
opacity: 0;
transform: translateY(20px);
}
}
/* Exit state */
.dialog[hidden] {
opacity: 0;
transform: translateY(-10px);
}💡Entry and exit animations using @starting-style.
🎯 Interview Key Takeaway
@starting-style enables pure CSS entry animations from display: none without JavaScript or keyframes.
#@starting-style#Animation#Transitions#Intermediate
Back to all CSS & Modern Layouts Questions→