demo · v131

animate <details> open and close

The new ::details-content pseudo is a real box, so it can be sized — and animated. Combine with interpolate-size: allow-keywords and @starting-style for a smooth zero-JS expand/collapse. Use the slider to tune the duration.

300 ms
About this product

A hand-built espresso lever with a single boiler. The pull is steady, the body neutral, and steam is plentiful. Made in Italy.

weight: 8.4kgwarranty: 2y
Specifications
  • boiler: 0.4L brass
  • pressure: 9 bar (lever-controlled)
  • portafilter: 58mm bottomless
  • power: 1200W
Care and cleaning

Backflush weekly with a blank disc. Descale every 60 days in soft-water regions, every 30 days in hard. Dry the steam wand after every shot.

the api

details::details-content {
  overflow: hidden;
  block-size: 0;
  transition: block-size 300ms ease, content-visibility 300ms allow-discrete;
  interpolate-size: allow-keywords;
}
details[open]::details-content { block-size: auto; }
@starting-style {
  details[open]::details-content { block-size: 0; }
}

see also