1分でわかる5秒でGIFアニメーション(動く画像)を作成する方法

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;
  }
}