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: