Gifアニメをwebページに貼ってみると、常にループして動いてしまい、説明をアニメにまとめている場合は不向きだと感じたので、再生をコントロールできないものかと考えました。
自分のwebページは以前記事で書いた、classをJavaScriptで操作する方法にしました。
ですが、JavaScriptを使わずにCSSだけで表現する方法がとれれば簡単だなと考え、hoverと~（チルダ）で試してみました。この方法で、通常webページはCSSだけでポインタを画像に合わせている間だけアニメーションを動かすことができました。
ただ、私のスキルでこのブログ上にhoverを使って、表示を安定させることができませんでした（笑）
しかし、activeならうまく動きましたので再現してみました。
下のグラフをクリックしている間、アニメが動きます。
（スマホの場合は下の▶ボタンをタッチしてください。ほかをタッチすると止まります）
これは静止画を常に表示させておいて、ポインタの動作によって静止画を消し、GIFアニメ画像を表示させるという方法です。実際にアニメが止まっているわけではありません。
これはどうやっているのかコードを書くと、
CSS側
.hide{
display :none;
}
.move_start:active~.hide{
display :block;
}
.move_start:active{
display :none;
}
HTML側
<img src="静止画ファイル名.jpg" class="move_start">
<img src="アニメファイル名.gif" class="hide">
これだけです。このブログ上ではもう少しCSS書かないとだめですが、基本はこれだけです。静止画とアニメ画像のサイズが違うときはCSSで調整するか、元の画像サイズの調整が必要です。
CSS側の.move_start:activeの:activeを:hoverに変えるとポインタを画像に合わせている間だけ動くようになります。
そして、コードのCSSの中にある~チルダが難しそうな雰囲気です。用語とかいろいろありますが、わけわからないので、私なりの解釈です。
書き方は上のように
.クラス名①:指定の状態~.クラス名②となっています。
「クラス名①が指定の状態になったら、クラス名②を指定のCSSにする」ということです。
HTMLは<video>タグで簡単に動画の埋め込みもできるし、タグ内にcontrolsと書けば操作パネルも出てきます。なのでGifアニメの需要はあまりないのかもしれませんが、私みたいにお金をかけずにwebページを作っていたら、ファイルの容量がとても大事になってきます。その点、Gifは安心です。
CSSだけで今回はやってますが、JQueryにもっとファイルを操作できるものもあるようです。そちらも使ってみたいなと思ってます。
追記：スマホの場合、activeで画像をタッチしてもらう動きにすると、いちいちDownLoadするか聞いてきますね。とても不親切なので、レスポンシブにするにはbuttonでtype="button"にしたところにclassつけて、:focus~にした方が自然でした。ただ、また私のスキルでは、このブログ上で再現できませんでしたので、ダミーのボタンを通常の要素でつくって:hoverで動く方法にしました。これに停止ボタンもダミーで作れば、操作しているっぽくなります。
でも、通常ページで実装するならJavaScriptでボタン操作が一番安定しますね。
