Animated Striking Checkbox

This is an Animated Striking Checkbox. It transforms a standard checkbox into a highly expressive UI element that physically becomes the strikethrough line for its associated label. Its function is to provide satisfying, immediate feedback for to-do list items, visually linking the action of checking a box to the result of striking out the text.

Specs

• Weight: ~2.5 KB. No external dependencies.
• Performance: High. The entire interaction is powered by a series of complex CSS @keyframes that manipulate transform and background, ensuring the animation is handled by the browser’s compositor.
• Theming / Customization: The component’s colors are fully controlled via CSS variables. It also includes built-in support for the user’s system preference with a @media (prefers-color-scheme: dark) block.
• Responsiveness: Fluid. All dimensions are defined using relative rem units, allowing the checkbox and text to scale naturally with the base font size.
• Graceful Degradation: Fails safe. The underlying element is a semantic <input type="checkbox">. If CSS or JavaScript fails, it reverts to a standard, fully functional browser checkbox.

Anatomy

The component uses a hidden checkbox and its pseudo-elements to create the visual magic.

• HTML (The Skeleton): A standard <label> and <input type="checkbox"> structure, ensuring full accessibility.
• CSS (The Skin): Hides the native input (appearance: none). The input’s ::before pseudo-element is styled to look like the checkbox, and the ::after pseudo-element contains the checkmark icon. The label text is a <span>.
• JS (The Nervous System): Minimal. A single event listener removes a .pristine class on the first click. This is a clever trick to prevent the “uncheck” animation from firing when the page first loads with a pre-checked box.

Logic

The core interaction is a multi-stage morphing keyframe animation driven by the :checked pseudo-class.

@keyframes strike {
	/* from checkbox... */
	from {
		transform: translateX(0) scale(1,1);
		width: 1.5em;
	}
	/* ...to a thin line... */
	33% {
		transform: translateX(0) scale(1,0.05);
		width: 1.5em;
	}
	/* ...that shoots across the text. */
	to {
		transform: translateX(2.25em) scale(1,0.05);
		width: calc(100% - 2.25em);
	}
}

input[type=checkbox]:checked:before {
	animation-name: strike;
}

When the checkbox is checked, the browser triggers the strike animation on its ::before pseudo-element. The keyframes are precisely calculated to first squash the box into a thin horizontal line, then rapidly translate and stretch it across the full width of the label text. A similar, reversed animation (unstrike) handles the unchecking process.

Feel

Tactile, mechanical, and highly satisfying. The animation feels like a physical object in motion. The box doesn’t just disappear; it transforms, moves, and becomes part of the text itself. The brief squash and stretch phases give the motion a realistic sense of weight and momentum. It turns the simple act of completing a task into a small, rewarding visual event.