CSS Only Gif Freezer (Janky) - WIP

home

I've written an alternative to freezeframe.js that also uses javascript, but if you prefer a CSS only alternative, I have a partial solution! This uses detail/summary elements, and is most useful for sections of gifs, like blinkie and button collections. If you have gifs sprinkled throughout your page, JavaScript will better serve you.

(Guide is a work in progress - currently an accessibility complication (images are included in the button name), pls dont use, im coding in my browser)

Test it out!

Note that the pause/play button is specific to the gifs contained in the details element, it is not a page or site wide button.

HTML

Unfortunately, like my JS alternative, this method needs a png (or jpg) version of every gif (or other animated file). I copy pasted my gifs into MS Paint and saved them as pngs, which may be tedious if you have a lot of gifs.

Heres an example if you're unfamiliar with how details and summary normally look

This is the summary, select it to open the details.

Heres the rest of the details. The hidden details are any element(s) inside the detail element, after the summary element.

Select the summary again to close these details.

Put the static images in the summary, and the animated images in the details after the summary. The static images will be shown, so the user has to select the summary to view the gifs.

<details>
  <summary>
    <img src="cat1.png">
    <img src="cat2.png">
    <img src="cat3.png">
  </summary>
        
  <img src="cat1.gif">
  <img src="cat2.gif">
  <img src="cat3.gif">
</details>

CSS

Here is all of the CSS.

details summary {
  list-style-type: none;}

details summary:before {
  display: block;
  content: "⏵ play gifs";
  border: 1px solid black;
  border-radius: 5px;
  background: pink;
  width: 7rem;
  margin-bottom: 2px;
  padding-left: 0.2rem;}
  
details[open] summary:before {
  content: "⏸ pause gifs";}
  
details[open] summary img {
  display: none;}

Thats all! I explain the CSS further below if needed.

CSS Breakdown

details[open] summary img {
  display: none;}

This hides any image in the summary element when the detail element is opened.

details summary {
  list-style-type: none;}

This removes the arrows at the begining of the summary. With images hidden, this also means that you won't be able to reclose the details (repause the gifs) without additional CSS.

details summary:before {
  content: "⏵ play gifs";
  display: block;}

Now we replace the arrow with a message, telling the user to select if they want to see the moving gifs. Displaying as a block puts the still images below the message, rather than to the side.

I used the :before instead of list-style-type because it accepts more styles.

details[open] summary:before {
  content: "⏸ pause gifs";}

Use [open] to specify what the details look like when they're revealed. Here the message is changed to tell the user to select the summary again if they want to pause the gifs.

The following CSS just styles the pause/play messages to make them look more like buttons.

details summary:before {
  border: 1px solid black;
	width: 6.5rem;
	border-radius: 5px;
	background: pink;
	margin-bottom: 2px;
	padding-left: 0.2rem;

Note that a width is set for the button so that it does not span the whole container length (since it's a block element, and it being a block element is the only thing that keeps the paused images below it).

Again this only works for gifs that are all together, or individually per gif. Its good for collections of gifs, or a page that as one gif, but not for pages that have gifs in multiple spots, since you would have to have a detail element for each gif, or put unrelated content in the details.