# Minimal CSS play/pause gif
#code

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

```css
.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;
	}
}
```

```html
<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:
<style><!--
.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;
	}
}
--></style>
<label class="gif">
	<input type="checkbox">
	<img alt="animated HAND THING 88x31 badge" src="../public/badges/handthing.gif">
	<img alt="static HAND THING 88x31 badge" src="../public/badges/handthing-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. ie:
```css
.gif input {
	position: absolute;
	left: -9999px;
}
.gif input + img + img,
.gif :checked + img {
	display: none;
}
.gif :checked + img + img {
	display: inline;
}
```

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