JavaScript不要！CSSだけで画像を動かしてみよう！

動きのつけ方

動かすのに必要なコード

画像に動きを付けるための基本的なステップは3つです！

それぞれ順番に使いかたを見てみましょう。

animationの使いかた

animationの使いかたは次の通りです！

・[アニメーション名]は、後に解説する「@keyframes」を指定する部分になります。

・[動作する時間]の部分には、指定した動きを何秒間の間に行うかを指定できます。
　例えば、画像が上に上昇するアニメーションを作成したとして、動作する時間の指定を1s(1秒)とした場合、
　画像が上に到達するのは、動き始めてから1秒後となります。

・[アニメーションの緩急]は、自分の好みの動かし方を指定することができます。
　緩急の指定には、次のような種類があります。

種類	特徴
linear	同じ速度で動き続ける
ease-in	少しずつ早くなっていく
ease-out	少しずつ遅くなっていく
ease-in-out	加速してから減速する

animation-iteration-countの使いかた

animation-iteration-countの使いかたは、次の通りです！

「animation-iteration-count」は、画像の動作を何回繰り返すか指定することができます！
[実行回数]の部分に入れる回数の指定は、次の2パターン存在します。

・任意の数　→アニメーションを繰り返したい数を入れる
　例：animation-iteration-count: 5　→5回同じ動きを繰り返す
・infinite　→アニメーションを繰り返し続ける
　例：animation-iteration-count: infinite　→ずっと同じ動きを繰り返す

@keyframesの使いかた

@keyframesの使いかたは、次の通りです！

・@keyframes [アニメーション名]{
n%{[好みの動き]}
n%{[好みの動き]}
n%{[好みの動き]}
}

「@keyframes」は画像に持たせたい動きを、指定することができます！
「animation」で指定した[実行時間]の中で、何秒の地点ではこの動きというを%で指定します。

例えば、「animation」で[実行時間]を10秒としているときは、
0%で0秒地点の動き、50%で5秒地点の動き、100%で10秒地点の動き
といった風に、動きの指定ができます。

・[好みの動き]には、「width(幅)」「height(高さ)」など、いろいろな指定ができますが、
　今回は、動きに注目して、指定の仕方を見ていきましょう。
　動きの指定には、次の指定ができます。

種類	説明
transform:translateX([大きさ(px)])	[大きさ(px)]分横に動かすことができる
transform:translateY([大きさ(px)])	[大きさ(px)]分縦に動かすことができる

例として、上下左右に5pxずつ動かす際の指定は次のようになります。

X軸の動きは、プラス(正の数)が右、マイナス(負の数)が左
Y軸の動きは、プラス(正の数)が下、マイナス(負の数)が上

実際に組んでみよう！

上下に画像を動かしてみよう！

下記の条件の動きを実際に組んでみましょう！

条件：
画像の動き：上下に動かす（先に下から動き、動き終わったら少し止まる）
動作する時間：2.2秒
実行回数：ずっと動き続ける

コードと、実行結果は次のようになります。

See the Pen blog_img_animation by 植村懸音 (@ufuykagy-the-encoder) on CodePen.

まとめ

・animation: [アニメーション名][動作する時間][アニメーションの緩急]
・animation-iteration-count: [実行回数]
・@keyframes [アニメーション名]{
　　n%{[好みの動き]}
　}