The transition of the upper level of the elements and the property of display in CSS

The article tells the new capabilities of CSS-animation, including the properties of @starting-style and transition-behavior. The author considers in detail how to animate the transition from and to Display: None, which was previously possible only with JavaScript. It is also explained how these properties can be used to animate dialogs and Popover.

🚀 For a more detailed understanding, the author provides examples of code and practical examples of using these properties. This helps you understand how these new properties can improve the user's experience on the website.

💡 The author also adds important information on browser support for these new properties, including CSS Transitions Level 2. This is important for developers so that they can plan their work accordingly.

• 📌 CSS Animations are becoming more flexible with new properties @starting-style and transition-behavior.
• 📌 From now on, it is possible to animate the transition from and to Display: None.
• 📌 Using Transition-Behavior Properties: Alow-Discrete allows you to animate other "discrete" CSS properties, such as Visability and Mix-Blend-Mode.
• 📌 The property of @starting-style defines the style of the item immediately before displaying it on the page.
• 📌 Adding dialogs and Popover to the upper level of the web page can significantly improve the user's experience.