Nesting Doll Bears in CSS, No JavaScript
Russian doll bears by Jhey Tompkins on CodePen
Open on CodePen ↗Click a nesting-doll bear and it opens to show a smaller one, down to the last, then a reset button puts them all back.
Jhey Tompkins explained the build: each bear is a checkbox and label, and the adjacent sibling combinator reveals the next one. Chained keyframe animations timed with custom properties open the lids, and a form reset input clears the scene without JavaScript. The bears are drawn as inline SVG.
interactiveart:checkedtransition
The modern.css newsletter
New CSS each month, and new things in the Atlas. 806 subscribers. Past issues
More like this
See all →- interactive
by Jhey TompkinsWorking stopwatch
A stopwatch that keeps real time, counted by CSS animationsinteractiveanimation:checkedcounter() - animation
by Kiarash ZarinmehrDancing skeleton
A small skeleton that never stops dancinganimationarttransformborder-radius - animation
by Ricardo Oliva AlonsoPainter
A painter at his easel, drawn and animated in CSSanimationartborder-radiuslinear-gradient