Minimal CSS play/pause gif
2026-08-20_css-gif

txt

#code

Default: Animation plays. Stops when clicked.
Prefers reduced motion: Animation stopped. Plays when clicked.

.gif input {
	position: absolute;
	left: -9999px;
}
.gif input + img + img,
.gif :checked + img {
	display: none;
}
.gif :checked + img + img {
	display: inline;
}
@media (prefers-reduced-motion: reduce) {
	.gif input + img,
	.gif :checked + img + img {
		display: none;
	}
	.gif input + img + img,
	.gif :checked + img {
		display: inline;
	}
}

<label class="gif">
	<input type="checkbox">
	<img src="anim.gif">
	<img src="static.gif">
</label>

This works at least as far back as Netscape 7.2 from 2004. Demo:

You can get rid of the media query if you switch the order of the <img>s. Then gifs will default to paused regardless of motion preference. ie:

.gif input {
	position: absolute;
	left: -9999px;
}
.gif input + img + img,
.gif :checked + img {
	display: none;
}
.gif :checked + img + img {
	display: inline;
}

<label class="gif">
	<input type="checkbox">
	<img src="static.gif">
	<img src="anim.gif">
</label>

§ See Also ^