こんにちは、WEBデザイナーのANAです。

今回は、css3でアニメーションに挑戦します！

昨年、一昨年とフラットデザインが流行してから、背景一色のデザインが多く見られるようになりましたね♪
そこで、背景一色の静止画も素敵なんですが、ものによってはその背景が自動で変化すればもっと面白くなり、目を引くのになぁ～と思っていたところにcss3でアニメーションをしてみようということになったので、今回挑戦してみました。

CSS3 キーフレームアニメーションについて

ここでは、要素を少しづつ変化させるアニメーションをご紹介します。

css3の『animation』プロパティでは、キーフレームというものを設定することで細かい動きを付けることができます。

細かいとこまでってどこまでかって？
それがアニメーションの時間やタイミングまで、本来ならばJavascriptやjQueryを使って行うところまでcssでできてしまうんです～!!

感動!!( ;∀;)

キーフレームって何？

css3はわかるけどキーフレームって聞いたことない！
キーフレームアニメーションってどういう意味？

と思っているあなた！

キーフレームとは、通過点のこと。

つまり、アニメーションの中で変化が定義されているフレームのことなんです。

各キーフレームで要素がどう変化するかは @keyframes という@規則で定義します。

ここで大切なのがアニメーションとそのキーフレームを一致させるためには、@keyframes 規則の名前と、要素に指定する animation-name プロパティの名前を一致させる必要があります。

この規則の名前は「@keyframes + 任意の名前」で宣言します。

キーフレームの情報を0%〜100%の%表示で書いていきます。

0%はアニメーション開始時、100%は終了時です。

css3でグラデーションを使用するときもこんな感じなのでなんとなくだけどわかりやすいですよね♪

ちなみにcss3でグラデーションのように、0%は from、100%は to という書き方でもOK!!

例えば、

@keyframes grade {
0% { background: #FF9999;}
50%{ background: #FFE599;}
100%{ background: #FF99FF;}
}

ちなみに、ChromeやSafari等のWebKit系ブラウザーでは、ベンダープレフィックス（-webkit-）が必要です。

@-webkit-keyframes grade {
0% { background: #FF9999;}
50%{ background: #FFE599;}
100%{ background: #FF99FF;}
}

ChromeやSafari向けになるとこうなります。

animation関連のプロパティについて

●animation-name

@keyframes で定義した名前を指定します。
これをちゃんと指定しておかないとアニメーションは動きません。
なのでここはしっかり決めておきましょう♪

●animation-duration

アニメーションを動かす時間の長さを「秒数＋s」で指定します。

例えばこんな感じ

body {
 animation: grade 5s;
}

注意するべきが、この値が0だと実行されません。またマイナスなどの負の値を指定しても0として扱われてしまうので、実行されません。気を付けてください。

●animation-delay

ページ（要素が）読み込まれてからアニメーションを何秒からはじめるかの指定をすることができます。

これも上述したanimation-durationと同じ指定（「秒数＋s」）の仕方になります。

●animation-timing-function

アニメーションをどのようなタイミングで出すか、どうやって進めるかを指定します。
ここで滑らかな動きなどを調整できます。

値は以下の通り～

• ◆ ease-in
• ◆ ease-out
• ◆ ease-in-out
• ◆ linear

●animation-delay

ページ（要素が）読み込まれてからアニメーションを何秒からはじめるかの指定をすることができます。

これも上述したanimation-durationと同じ指定（「秒数＋s」）の仕方になります。

●animation-direction

animation-directionはアニメーションを繰り返す方向が指定できます。

• ◆ normal … 通常の方向（初期値）
• ◆ alternate … 奇数回で通常・偶数回で反対方向に再生（行ってきて行ってきてという具合）
• ◆ reverse … 逆方向
• ◆ alternate-reverse … alternate の逆方向

●animation-iteration-count

アニメーションの繰り返しを指定します。

ループにするにはinfinite を指定すれば無限にループされます。

●animation-play-state

アニメーションの一時停止や再生中（running）が指定できます。

●animation-fill-mode

アニメーションの再生前後の状態が指定できます。

• ◆ none（初期値）
• ◆ forwards … 再生後、最後のキーフレームの状態を維持する
• ◆ backwards … 再生前、最初のキーフレームの状態を適用させる
• ◆ both … forwards と backwards の両方を適用する

では、実際にcss3でアニメーションを実装してみましょう♪
背景色を変更していくアニメーションを実装します。

css3でアニメーションを実装!!

animation関連のプロパティを覚えたところで、実装してみます。

キーフレーム名を「grade」とし、0〜100%までで推移させる背景色を設定します。

@-webkit-keyframes grade {
 0% { background-color: #FF9999; }
 20% { background-color: #FFB973; }
 40% { background-color: #F0E1A8; }
 60% { background-color: #99CCFF; }
 80% { background-color: #FF99FF; }
 100% { background-color: #DFFFBF; }
}
@keyframes grade {
 0% { background-color: #FF9999; }
 20% { background-color: #FFB973; }
 40% { background-color: #F0E1A8; }
 60% { background-color: #99CCFF }
 80% { background-color: #FF99FF; }
 100% { background-color: #DFFFBF; }
}

ページ全体で色の変化を見てもらうためにbodyに、animationプロパティを指定します。

body {
 background-color: #FF9999;
 animation: grade 5s infinite;
 -webkit-animation: grade 5s infinite;
}

下記のリンクをクリックすると今回行ったアニメーションを見ることができますので、ぜひ見てみてください♪

一色の背景パターンのときなどに使用するといいアクセントにもなるし、ユーザーの印象にものこりやすくなります。ぜひみなさんも実装してみてください。

【URL】http://smile-design.bz/tight/grade.html

それではANAでした～(^^)/