Open & Close Transitions with <details>

CSS interpolate-size is rad . Let's use it with the element so this element can join other HTML elements in elegant presentation. By far, the most common use case I keep seeing for interpolate-size is to transition the element when it opens and closes. This is your boilerplate starting place. The Setup # Start with a element: < details > < summary >Details interpolation example</ summary > < p > Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid dolores, distinctio ipsum veritatis magni soluta maiores rerum optio, possimus animi eligendi architecto sed placeat quasi quibusdam, nihil odio. Amet, tempore. </ p > </ details > Next, it needs a max-inline-size (or placement inside a grid) to prevent the content from being as wide as the page: details { inline-size : 50 ch ; } Next, add interpolate-size to the element so we can transition to block-size: auto : details { @ media ( prefers-reduced-motion : no-preference ) { interpolate-size : allow-keywords ; } } Now the tricky parts that make this post valuable. Select the slot of with ::details-content and describe the closed styles. Take special note to transition: content-visibility 1s allow-discrete : details { & : :details-content { opacity: 0 ; block-size : 0 ; overflow-y : clip ; transition : content-visibility 1 s allow-discrete , opacity 1 s , block-size 1 s ; } } Lastly, add the open styles. details { &[ open ] : :details-content { opacity: 1 ; block-size : auto ; } } So technically, we're not transitioning the element, we're transitioning the slotted content that goes inside it . The boilerplate # Take this and go make awesome things! details { inline-size : 50 ch ; @ media ( prefers-reduced-motion : no-preference ) { interpolate-size : allow-keywords ; } &:: details-content { opacity : 0 ; block-size : 0 ; overflow-y : clip ; transition : content-visibility 1 s allow-discrete , opacity 1 s , block-size 1 s ; } &[ open ]:: details-content { opacity : 1 ; block-size : auto ; } } The Demo # Try it on this page or try it as an accordion in this notebook ! What is my favorite CSS color? deeppink! Note that this effect needs transition-behavior , ::details-content and interpolate-size to work. See the Pen by Adam Argyle ( @argyleink ) on CodePen . Send me a link to the rad elements you make with this‽