CSS now supports animating the display property using @starting-style and transition-behavior: allow-discrete. This enables smooth transitions to and from display: none, solving a long-standing limitation. The technique requires setting up a closed state with display: none and opacity: 0, an open state with display: grid and opacity: 1, and using @starting-style within the open state to define initial animation values. This approach works for popup menus, modals, and other UI elements that need to appear and disappear smoothly.
ā¢2m watch time
1 Comment
Sort: