CSSアニメーションの基礎！Animationを使ってみよう

cssでアニメーションの基礎である「Animation」の使い方を詳しくご紹介します。cssアニメーションにはtransitionとanimationの２つがあり、animationはキーフレームというのを使ってアニメーション細かい動きを決めることができるプロパティです。アニメーションの開始時から終了時までを%で分けて、その時の状態をcssで決められる優れものです。そんなに難しくないので、ぜひマスターしましょう。

前回はtransitionを説明しました。transitionの使い方についてはこちら

1. CSS Animationの使い方
2. animationで指定できるプロパティ
3. animationの使用例
4. さいごに

CSS Animationの使い方

キーフレームというのを使ってアニメーションの細かい動きを決めることができるプロパティです。まずは下のサンプルを見てください。

サンプル１See the Pen <a href="https://codepen.io/kaiharu/pen/XPGKBJ/">animation-Sample1</a> by kaiharu (<a href="https://codepen.io/kaiharu">@kaiharu</a>) on <a href="https://codepen.io">CodePen</a>. 
赤色、黄色、黄緑色、水色、紫色の順に変化しながら、高さが伸び縮みしていると思います。CSSをみてください。@keyframesと書いてあると思います。これがanimationの細かい動きを決めるためのプロパティで、アニメーションの最初が0%、最後が100%としてその間を好きな%で区切ってその時の状態を指定することで、あらゆる動きをつけることができます。

animationで指定できるプロパティ

animation-name：アニメーションの名前

@keyframeで指定したアニメーションの名前を指定するプロパティです。noneや存在しない名前を指定した場合、アニメーションは起こりません。

animation-nameで指定できる値

デフォルト：none
@keyframeで指定した名前

animation-duration：アニメーションにかける時間

要素のアニメーションにかける時間を指定するプロパティで、単位はs（秒）またはms（ミリ秒）で指定します。

animation-durationで指定できる値

デフォルト：0s
単位はs（秒）またはms（ミリ秒）で指定

animation-timing-function：アニメーションのタイミング

アニメーションのタイミング・進行割合を指定するためのプロパティで、主に以下の6種類あります。ほとんどtransitionと同じです。

animation-timing-functionで指定できる値

ease（デフォルト値）：始まりと終わりを滑らかにする
linear：一定に変化させる
ease-in：ゆっくりと始める
ease-out：ゆっくりと終わる
ease-in-out：ゆっくりと初めてゆっくりと終わる
cubic-bezier(値, 値, 値, 値)：独自に設定

animation-iteration-count：アニメーションの繰り返し

アニメーションの繰り返し回数を指定するプロパティで、好きな回数を指定することもできるし、永遠にループさせるinfiniteを指定こともできます。ここがtransitionとの大きな違いです。

animation-iteration-countで指定できる値

デフォルト：1
数値：繰り返したい回数を数字で指定する
infinite：永遠にループする

animation-direction：アニメーションの再生方向

アニメーションがずっと同じ方向に再生されるのか、交互に反転再生させるのかを決めるプロパティです。

animation-directionで指定できる値

normal（デフォルト値）：普通方向の再生でアニメーションサイクルを繰り返す
alternate：奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す

alternateを指定して逆方向の再生のとき、animation-timing-functionで指定したタイミング・進行割合も反転します。例えば、ease-in（ゆっくりと始める）を指定した場合、逆方向ではease-out（ゆっくり終わる）になります。
最初に見たサンプル１のanimation-directionをalternateにして見ましょう。

サンプル２See the Pen <a href="https://codepen.io/kaiharu/pen/Regqdj/">animation-Sample2</a> by kaiharu (<a href="https://codepen.io/kaiharu">@kaiharu</a>) on <a href="https://codepen.io">CodePen</a>.

サンプル１では「赤 → 黄色 → 黄緑 → 青 → 紫」の後、パッと赤に変わりまた同じアニメーションを繰り返していました。ですがサンプル２では「赤 → 黄色 → 黄緑 → 青 → 紫」の後、「紫 → 青 → 黄緑 → 黄色 → 赤」と逆再生されています。この時、タイミングも逆再生のease-out（ゆっくり終わる）になっていることが確認できます。

animation-delay：アニメーションの遅延

アニメーションが何秒後に始まるのかを指定するプロパティで、単位はs（秒）またはms（ミリ秒）で指定します。

animation-delayで指定できる値

デフォルト値は0
単位はs（秒）またはms（ミリ秒）で指定

animationの使用例

ここまでが、animationの基本的な説明です。animationはループが可能なので、ホバーしたりクリックしたりという引き金がなくても動いていてほしい場所に使えます。
いくつかサンプルを用意したので、コピペしてそのまま使ってもいいですし、少しアレンジして使ってもいいですね。

ふわふわさせる

風船のような、雲のようなふわふわした動きをつけたいときに使えます。
See the Pen <a href="https://codepen.io/kaiharu/pen/rqwoOx/">Fuwafuwa</a> by kaiharu (<a href="https://codepen.io/kaiharu">@kaiharu</a>) on <a href="https://codepen.io">CodePen</a>.

@keyframes fuwafuwa {
	0% { transform: translate(0, 0); }
	50% { transform: translate(0, -20px); }
	/* -20pxを変えることで上下の動く幅を変えられる */
	100% { transform: translate(0, 0); }
}

ブルブルさせる

ブルブルと震えているような動きをつけたいときに使えます。
See the Pen <a href="https://codepen.io/kaiharu/pen/QZqXEv/">Buruburu</a> by kaiharu (<a href="https://codepen.io/kaiharu">@kaiharu</a>) on <a href="https://codepen.io">CodePen</a>.

@keyframes buruburu {
	/*translateの中の値を変えることでブルブルの大きさを変えられる*/
	0% { transform: translate(-3px, 0)rotate(-5deg); }
	50% { transform: translate(0, -2px)rotate(0deg); }
	100%{ transform: translate(-3px, 0) rotate(5deg); }
}

ゆらゆらさせる

振り子のように左右にゆらゆらさせたいときに使えます。
See the Pen <a href="https://codepen.io/kaiharu/pen/EdbYYZ/">Swing</a> by kaiharu (<a href="https://codepen.io/kaiharu">@kaiharu</a>) on <a href="https://codepen.io">CodePen</a>.

@keyframes swing {
	/*25%と75%のrotateの値を変えることで、振り幅を変えられる*/
	0% { transform: rotate(0deg); }
	25% { transform: rotate(10deg); }
	50%{ transform: rotate(0deg); }
	75% { transform: rotate(-10deg); }
	100% { transform: rotate(0deg); }
}

ぴょんぴょんさせる

うさぎがぴょんぴょん跳ねるような動きをつけたいときに使えます。
See the Pen <a href="https://codepen.io/kaiharu/pen/OBOKXg/">Pyonpyon</a> by kaiharu (<a href="https://codepen.io/kaiharu">@kaiharu</a>) on <a href="https://codepen.io">CodePen</a>.

@keyframes pyonpyon {
	/*20%と30%のtranslateの値を変えることで跳ねる高さを変えられる*/
	0% { transform: translate(0, 0); }
	5% { transform: translate(0, 0); }
	10% { transform: translate(0, 0); }
	20% { transform: translate(0, -15px); }
	25% { transform: translate(0, 0); }
	30% { transform: translate(0, -15px); }
	50% { transform: translate(0, 0); }
	100% { transform: translate(0, 0); }
}

さいごに

以上、css animationの使い方でした。意外と簡単だったのではないでしょうか？

jsを使って動かすこともできますが、cssで実装できるところはしてしまった方が、サイトの表示も早くていいかと思います。ぜひanimationを使いこなしてください。