CSSのみで画像をその場で回転させたり、大きな円を描くように回転させる方法

更新日：2017年3月5日

近年は画像を動的に動かすサイトも以前より少なくなってきました。
時代の流れによってGif画像やFlashが淘汰されてきた影響が大きいのではないかと思われます。

ただそれでもたまに画像を動かしたいって思うことってありますよね。
でも今時Gif画像やFlashを使うなんて……ってお悩みのあなたに朗報です！
それらより遥かに簡単に画像を動かすことが最近の技術では可能なんです。
しかもそれを実装するのはCSSの記述のみなんです。

では具体的にはどうするかというとCSS3から新たに追加されたanimationプロパティを使います。
今回の例では画像をその場で回転させるパターンと、画像を大きな円を描くように回転させるパターンの2種類を作成しました。

ではまず画像をその場で回転させるパターンのご紹介です。
HTMLの記述は下記のようになります。

なんてことないソースですね。
用意した画像（＝mawaru.png）を.anime_move1で囲ってあげています。

次にCSSは下記のような記述になります。

.anime_move1 {
	width: 190px;
	height: 190px;
	margin: 0 auto;
	-webkit-animation: anime_move1 5s linear infinite;
	animation: anime_move1 5s linear infinite;
}
@-webkit-keyframes anime_move1 {
	0% { -webkit-transform: rotateX(0deg) rotate(0deg); }
	100% { -webkit-transform: rotateX(0deg) rotate(360deg); }
}
@keyframes anime_move1 {
	0% { transform: rotateX(0deg) rotate(0deg); }
	100% { transform: rotateX(0deg) rotate(360deg); }
}

何やらややこしい記述のように思いますが、どうってことはありません。
ポイントは.anime_move1にwidthとheightを指定してあげている所です。
この例ではどちらも190pxとなっていますが、実際はあなたの用意した画像の大きさを指定してあげて下さいね。
また、5sで回転するスピードを指定しています。こちらはお好みのスピードに書き換えて頂いて結構です。

そして完成するのがこの下でグルグル回転しているこれです。
簡単な割になかなか良い動きしてませんか？

次に画像を大きな円を描くように回転させるパターンのご紹介です。
HTMLの記述は下記のようになります。

先程と同様のなんてことないソースですね。
.anime_move2で囲ってあげています。

次にCSSは下記のような記述になります。

.anime_move2 {
	width: 50%;
	margin: 0 auto;
	-webkit-animation: anime_move1 5s linear infinite;
	animation: anime_move1 5s linear infinite;
}
@-webkit-keyframes anime_move2 {
	0% { -webkit-transform: rotateX(0deg) rotate(0deg); }
	100% { -webkit-transform: rotateX(0deg) rotate(360deg); }
}
@keyframes anime_move2 {
	0% { transform: rotateX(0deg) rotate(0deg); }
	100% { transform: rotateX(0deg) rotate(360deg); }
}

これも先程と同様の記述になります。
唯一違う所は.anime_move2にheightを指定しない所とwidthとの指定を50%に指定している所です。
あなたの用意した画像の大きさが何pxであろうと50%に指定してあげれば大丈夫です。
もっと言うとこの50%を大きい数にすればする程更に大きな円を描くようになります。

そして完成するのがこの下で大きな円を描くように回転しているこれです。

いかがでしたでしょうか？
CSSだけで画像を動かせるなんて便利で楽ちんですね！ 今回は2つの動きのサンプルをご紹介しましたが、もっと色々と複雑な動きをさせることも勿論可能です。
とっても便利なanimationプロパティ、あなたも極めてみませんか？