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

YouTube

Simple Details and Summary Animation with Pure CSS

Kevin Powell via YouTube

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Learn how to create smooth animations for details/summary elements using modern CSS in this 13-minute tutorial video. Explore progressive enhancement techniques starting with basic HTML and styling, then dive into advanced features like interpolate-size properties and shadow DOM manipulation. Master the implementation of the ::details-content pseudo-element, discover height animation techniques, and solve transition closing issues. Follow along with provided CodePen examples and browser compatibility references while building an enhanced user interface that gracefully animates expanding and collapsing content sections.

Syllabus

- Introduction
- The HTML and basic styling
- Adding interpolate-size: allow-keywords
- Enable shadow DOM in your devtools
- The ::details-content pseudo-element
- Animating the height
- Fixing the closing transition

Taught by

Kevin Powell

Reviews

Start your review of Simple Details and Summary Animation with Pure CSS

Never Stop Learning.

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

Someone learning on their laptop while sitting on the floor.