# Minimal CSS play/pause gif
#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.

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

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

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.

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

<style><!--
.gif2 input {
	position: absolute;
	left: -9999px;
}
.gif2 input + img + img,
.gif2 :checked + img {
	display: none;
}
.gif2 :checked + img + img {
	display: inline;
}
--></style>
<br>
<label class="gif2">
	<input type="checkbox">
	<img alt="static HAND THING 88x31 badge" src="../public/badges/handthing-static.gif">
	<img alt="animated HAND THING 88x31 badge" src="../public/badges/handthing.gif">
</label>
<br>
<br>

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.

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

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

<style><!--
.gif3 input {
	position: absolute;
	left: -9999px;
}
.gif3 img {
	width: auto;
	height: auto;
}
.gif3 input + img + img,
.gif3 :checked + img {
	display: none;
}
.gif3 :checked + img + img {
	display: inline;
}
--></style>
<br>
<label class="gif3">
	<input type="checkbox">
	<img alt="static HAND THING 88x31 badge" src="../public/badges/handthing-static.gif">
	<img alt="animated HAND THING 88x31 badge" src="../public/badges/handthing.gif" width="0" height="0">
</label>
<br>
<br>

And with the media query:

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

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

<style><!--
.gif4 input {
	position: absolute;
	left: -9999px;
}
.gif4 img {
	width: auto;
	height: auto;
}
.gif4 input + img + img,
.gif4 :checked + img {
	display: none;
}
.gif4 :checked + img + img {
	display: inline;
}
@media (prefers-reduced-motion: reduce) {
	.gif4 input + img,
	.gif4 :checked + img + img {
		display: none;
	}
	.gif4 input + img + img,
	.gif4 :checked + img {
		display: inline;
	}
}
--></style>
<br>
<label class="gif4">
	<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" width="0" height="0">
</label>