HTML & CSS · Senior · Question 54 of 75
What problem does @starting-style solve?
.toast { opacity: 1; transition: opacity 0.3s, display 0.3s allow-discrete; }
@starting-style { .toast { opacity: 0; } }- ✓Correct answer: It defines the "before" values for entry transitions of elements that were just inserted or switched from
display: none - 2It sets styles that apply only on the first page load
- 3It disables transitions during initial render
Explanation
Without a starting style, newly displayed elements render directly in their final state. Combined with transition-behavior: allow-discrete, enter and exit animations work in pure CSS.