Transitions Between States · A turns into B
Accordion手风琴折叠
- compact
- organized
- predictable
As a section expands or collapses, its height changes smoothly and the content below is pushed down or pulled back with it.
When to use it
Use it for collapsible panels, FAQs and nested menus; for very long content use “Reveal”, so the height does not lurch.
Parameters
280ms · ease-in-out · grid-template-rows: 0fr→1fr
Recipe
Accordion → grid-template-rows 0fr → 1fr @ 280ms ease-in-out
One sentence for your AI
Animate this accordion panel: transition grid-template-rows from 0fr to 1fr over 280ms ease-in-out, reversing on collapse.