Animated icons
Seven interactive icons. Click or tap each one — a few lines of JS toggle
aria-pressed / data-state, and every frame of motion is CSS.
View source: each demo is commented with the technique it teaches.
Hamburger → X
Top and bottom lines translate to the middle, then rotate 45°.
transform-box: fill-box makes each line rotate around itself.
Play → Pause
No path morphing: two stacked shapes crossfade with a small rotation. Cheap, robust, and reads as a morph at icon size.
Like heart + particles
Keyframed scale bounce with an overshoot easing; particles animate
translate(var(--dx), var(--dy)) — one rule, six trajectories.
Bell with badge
Swing keyframes rotate around the bell's mount point
(transform-origin: 50% 0); the badge pops with an overshoot bezier.
Checkmark draw-on
The classic dashoffset draw, but with pathLength="100" so the
numbers stay round. Transitions make it reversible — click again to un-draw.
Submit → loading → check
A state machine on data-state: idle / loading / success.
JS swaps one attribute; CSS owns every transition between states.
Theme: sun → moon
cx/cy/r are CSS-animatable geometry
properties — the mask circle slides in to carve the crescent. No path morph.