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