Coursera Plus Annual is 40% Off — Ends July 6.

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Transitioning To and From Display: None in CSS

Kevin Powell via YouTube

Start learning Write review
Boot.dev Ad

The Most Addictive Python and SQL Courses

Learn More → CodeSignal Ad

Learn Generative AI, Prompt Engineering, and LLMs for Free

Learn More →

Overview

AI, Data Science & Cloud Certificates from Google, IBM & Meta — 40% Off
One plan covers every Professional Certificate on Coursera. 40% off Coursera Plus Annual.
Unlock All Certificates
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.

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

Reviews

Start your review of Transitioning To and From Display: None in CSS

Start learning

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.