CSSアニメーションには
CSS TransitionとCSS Animationの2つの実装方法があります。
2つの違いについてはこちらの記事で紹介しています。
前回は、「CSS Transition」について説明しました。

 

今回はCSS Animationについておさらいしていきたいと思います。

CSS Animation（CSS アニメーション）とは？

始点から終点までの二点間の任意の経過時点で、その地点ごとの状態を指定することが出来ます。
細かい動きのアニメーションを実装する時に利用します。

 

■まずは簡単なDEMO！

3秒間の内、1地点のみ縦方向に-6pxずらす
を無限に繰り返すことで、ふわふわした浮遊感を出している
シンプルなアニメーションです。

CSS Animationの使い方

前項のDEMOを元に、簡単にCSS Animationの使い方について説明します。

・html

Font Awesome のcloudアイコンを表示しているだけのシンプルな記述です。

 

・css

3行目がanimationのプロパティです。
ここでアニメーションにかける時間や速度などを指定します。
5～10行目の「keyframes」と必ずセットで使います。
keyframesで、開始（0%）から終了（100%）の各地点でどのように変化させるかを細かく決めます。

animationプロパティ

以下の8つの細かいプロパティがあり、それらをショートハンドするanimationプロパティで構成されています。

セレクタ{
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

 

記述の順序については、「transition-duration」を「transition-delay」より、必ず先に記述するようにだけ注意しましょう。

 

animation-name	アニメーション名（＝ @keyframes に適用する名前）を指定します まずこれを指定しない限りアニメーションされませんので必ず必要です。
animation-duration	アニメーションに掛かる時間を指定します 単位は秒（s）またはミリ秒（ms）です。 3sとすると3秒かけてアニメーションします。
animation-timing-function	アニメーションのパターンを指定します ease 出だしと終わりを滑らかに（初期値） linear 一定で動く ease-in ゆっくり始まる ease-out ゆっくり終わる ease-in-out ゆっくり始まりゆっくり終わる その他参考　Easing function 早見表
animation-iteration-count	アニメーションの繰り返し回数を指定します 初期値 1。1回のみ再生されます。 数値 指定した数値分、再生されます。 infinite 無限にループされます。
animation-direction	アニメーションの再生方向を指定します normal 初期値。毎回、順方向のアニメーションが再生されます。 reverse 毎回、逆方向からのアニメーションが再生されます。 alternate 順方向、逆方向のアニメーションを交互に繰り返します。 alternate-reverse 逆方向、順方向のアニメーションを交互に繰り返します。
animation-delay	アニメーションがはじまるまでの遅延時間を指定します 単位は秒（s）またはミリ秒（ms）です。 初期値は0sで、すぐにアニメーションが始まります。 3sとすると、3秒後にアニメーションが始まります。
animation-fill-mode	アニメーション再生中・再生後のスタイルを指定します none 再生後は、元のスタイルが適用されます（初期値） forwards 再生後は最後のキーフレーム（100%）のスタイルが適用されます animation-delayプロパティを指定している場合、再生までの時間は元のスタイルが適用されます backwards 再生後、またanimation-delayプロパティを指定している場合の再生までの時間は、 最初のキーフレーム（0%）のスタイルが適用されます both 再生後は、最後のキーフレーム（100%）のスタイルが適用されます animation-delayプロパティを指定している場合、再生までの時間は最初のキーフレーム（0%）のスタイルが適用されます
animation-play-state	アニメーションの再生・停止を指定します running アニメーションが再生されます。（初期値） paused アニメーションが停止されます。

 

■個別に記述も可能
animationプロパティは以下のように個別に記述することもできます。

@keyframes

@keyframes ○○○○{}
は必ずセットで記述します。
○○○○ にはanimation-nameが入ります。
開始から終了の各地点でどのように変化させるかを細かく決めます。
値は「from」「to」「パーセンテージ（％）」で指定できます。

DEMO では35％の地点で縦方向に-6pxずらすことでふわふわと上下する動きを実現しています。

 
もしくは以下のように記述します。