5秒でGIFアニメーションを作成する手順
1. アニメーションに使う画像を用意する
2. 画像名をanime1.png, anime2.png, anime3.pngのように表示したい順に語尾に連番を付けてリネームする。
3. ImageMagickをインストールする
brew install imagemagick
Windowsの場合は下記のURLからインストール
https://www.imagemagick.org/script/binary-releases.php
4. 下記のコマンドを実行する
convert -delay 100 -loop 0 anime*.png anime.gif
-delay 100は100/100秒ごとに切り替えを意味しているため0.5秒で切り替える場合は50にする。
-loop 0は無限ループを意味しており、3回繰り返す場合は-loop 3となる。
CSSアニメーションで切り替える
上記でgifアニメーションを使用したがgifアニメーションはファイルサイズが大きいため、最近はCSSアニメーションを使用するケースが多い。
画像は3つに分けずに1つにまとめてstepを使用すると下記のコードで簡単に作成できる。
画像を横に並べて配置した場合はbackground-position-x: 画像の幅, 縦に並べた場合はbackground-position-y: 画像の高さを入れるだけだ。
.anime { width: 400px; height: 300px; background: url('https://iwb.jp/s/anime.png') no-repeat; animation: anime 3s steps(3) infinite; } @keyframes anime { to { background-position-x: -1200px; } }