About this set
Three ways to add motion to an accordion without a JavaScript animation library. Sliding open grows the panel from zero height to its full height over 280ms. In plain CSS and Tailwind the panel is a one-row grid, and a keyframe animation runs its grid-template-rows from 0fr to 1fr each time the details element opens, so the height is never hard-coded. Fading content keeps the height instant and fades the answer in over 300ms with a short delay. Shifting summary on hover slides the question 8px to the right when the pointer is over it, a small cue that the row is clickable. Because native details hides its content immediately when it closes, the plain CSS and Tailwind versions animate only on opening. The Bootstrap version uses the Collapse plugin’s own height transition, retimed to 280ms, which animates both opening and closing; the fading variant turns that transition off and fades the body in instead. All motion is removed when the visitor asks for reduced motion.
What’s included
- Three motions: slide open, fade in, shift on hover
- Height animation through grid-template-rows, no fixed heights
- Bootstrap version slides both ways with the Collapse plugin
- Every animation and transition removed under prefers-reduced-motion
- No JavaScript in the plain CSS and Tailwind versions
Accessibility
Headers are summary elements, or buttons with aria-expanded and aria-controls in the Bootstrap version, and the content is in the page from the start, so screen readers are not affected by the animation. Tab reaches each header, Enter or Space toggles it, and focus shows a 2px blue outline. Under prefers-reduced-motion the panels open instantly and the hover shift is not animated.
Customise it
Change the durations in the acc-slide and acc-fade keyframe rules and the 26px hover padding in .acc-shift, and the --acc-* properties for colour. In Bootstrap retime .acc-slide .collapsing; in Tailwind edit the --animate-acc-slide and --animate-acc-fade theme values.
