01 — The trick
A checkbox does the thinking
A hidden <input type="checkbox"> plus a <label> gives us real,
persistent state with zero script. The :checked selector drives every single frame.
Interaction № 01 — State & Motion
The Like Button
One hidden checkbox, eighteen keyframe animations and absolutely no JavaScript. Click the heart — or tab to it and hit Space. Click it again to reset the blast.
BOOM!
Waiting for a little love… it’s a checkbox, so it’s fully keyboard accessible.
Boom. 100% CSS — no scripts were harmed.
02 — The blast
Eighteen layers of keyframes
Shockwave rings, sixteen sparks, twelve confetti shards, a camera shake, a white flash,
a flying BOOM! and a heart that overshoots, wobbles and settles.
03 — The proof
Look ma, no JavaScript
Open view-source: there is no <script> tag in this document.
Uncheck to reset, then hit it again — the animation fully replays every time.