Explore the new capabilities of CSS transitions for display properties in this 21-minute video tutorial. Learn how to animate elements to and from display: none using keyframes, understand discrete animations, and discover the @starting-style rule for smoother transitions. Dive into browser support, progressive enhancement techniques, and best practices for implementing overlays in popups and dialogs. Gain insights on handling pseudo-elements like ::backdrop and enhance your CSS skills to create more dynamic and visually appealing web designs.
Overview
Syllabus
- Introduction
- Using keyframes to animate the display property
- What you might try to get transition to work
- What is a discrete animation
- Open Web Docs
- Using transitions to go to and from display: none
- CSS Demystified
- Using @starting-style
- Easily have different transitions in each direction
- Browser support and progressive enhancements
- Make sure you include overlay for popups and dialogs
- The problem with peudo-elements, including ::backdrop
Taught by
Kevin Powell
