Result

画像をクリックするとGIFアニメが再生される、みたいなやつです。

マウスホバーで再生というお手軽な方法もあるけど、クリック再生はこれはこれで利用シーンがあるんじゃないかなと。

方法はこの手のトリックではお馴染みのinputを利用する形となります。

css

label.clicktogif {/*再生ボタン*/
background: url('image.png') DimGrey no-repeat center center;
  display: block;
  float: left;
}
label.clicktogif:hover, label.clicktogif:focus-within  {/*再生ボタン、マウスホバー用*/
background: url('hover.png') DarkSlateGrey no-repeat center center;
  display: block;
  float: left;
}

.clicktogif img {display: block;}
.clicktogif input[type=checkbox] {/*全体をlabelで包括してクリッカブルにし、チェックボックス自体は外へ飛ばす*/
    position: absolute;
    left: -100vw;
}
.clicktogif input[type=checkbox] + img {/*アニメーションのgifは非表示にしておく*/
  opacity: 0;
}
.clicktogif input[type=checkbox]:checked + img {/*チェックが入ったら表示させる*/
  opacity: 1;
}

内容は割とシンプルです。

html

 <label class="clicktogif" title="click to show gif">
  <input type="checkbox">
  <img src="animation.gif">
</label>

画像とinput要素をlabelで包括します。

via

A CSS only “click to animate gif” solution