Animation when changing from display: none to display: block

CSStransitions can have an animated effect by time-delaying the change of certain properties. However, changes to display properties (e.g., from display: none to display: block ) are not subject to animation by transition. This is because the display property is directly related to rendering and is applied immediately.

Therefore, if you want to animate changes to the display property, you can use the animation property.

Method: @keyframes fadeIn

@keyframes fadeIn { 
 from { opacity: 0; } 
 to { opacity: 1; } 
} 

element { 
 animation: fadeIn 1s forwards; 
} 

The above code defines an animation called fadeIn, which applies a fade-in animation to the target element in 1 second. In this way, the animation effect of the display change can be reproduced by using opacity to animate immediately after the change to display : block.

This method is expected to improve the user experience by allowing changes to the display property to have a smooth animation.