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.

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

.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>



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.

.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>



One downside of this approach is that the naked HTML will show both images (and the checkbox). We're stuck with the checkbox, but we can hide one of the images.

.gif input {
	position: absolute;
	left: -9999px;
}
.gif img {
	width: auto;
	height: auto;
}
.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" width="0" height="0">
</label>



And with the media query:

.gif input {
	position: absolute;
	left: -9999px;
}
.gif img {
	width: auto;
	height: auto;
}
.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" width="0" height="0">
</label>

§ See Also ^