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

前前前のブログか何かで@keyframesについての話がでましたね！
このブログです。
>>CSS3でフェードで画像が切り替わるフルスクリーンスライドショー

で、出たっきり詳しいことなにも書いてなかったので、今回は自分自身の理解を深めるためにもキーフレームアニメーションについて少し詳しくかいてみようと思います。

私自身使いはじめのことは、なんだかふわっとわかっている感じで使用していましたが、ちょこちょこ動きを表現するのに制限がでてきたのでやっぱりちゃんと知っておこうという感じです。

では、ほんとに初歩的なところから。

 

キーフレームって何？

css3はわかるけどキーフレームって結局何をしてくれるものなの？
どうしてこれでアニメーションが動くの？どういう指示をすればよいものなの？

疑問はいろいろ。

 

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

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

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

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

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

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

つまりスタートから終わりまでをcss3で指示していくということです。

 

例えば、

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

/*chromeやsafari向け*/
@-webkit-keyframes grade {
0% { background: #FF9999;}
50%{ background: #FFE599;}
100%{ background: #FF99FF;}
}
こういう感じです。
これだと徐々に変わるグラデーションを表現できます。
ちなみに、もちろんのことながらChromeやSafari等のWebKit系ブラウザーでは、ベンダープレフィックス（-webkit-）が必要です。

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

●animation-name

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

 

●animation-duration

アニメーションを動かす時間の長さを「秒数＋s」で指定します。
この秒数を指定するときはかならず数字を入れてください。
なぜなら値が0だと実行されないからです。またマイナスなどの負の値を指定しても0として扱われてしまうので、実行されません。気を付けてください。

div.box { animation: grade 5s; }
●animation-delay

ページ（要素が）読み込まれてからアニメーションを何秒からはじめるかの指定をすることができます。これも上のanimation-durationと同じ指定（「秒数＋s」）の仕方になります。

 

●animation-timing-function

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

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

これらが指示するときの値です。

 

●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 の両方を適用する

 

キーフレームを動かすときの要素は以上になります。
実際に、グラデーションなどを画像に重ねて透過させる場合の@keyframesを書いてみました。

div.box {
 background-color: #FF9999;
 animation: grade 5s infinite;
 -webkit-animation: grade 5s infinite;
}


@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; }
}

@-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; }
}

これまでふわっとわかっていたことも、結構掴めたのではないでしょうか？
より理解を深めてみなさんも実装してみてください。

Share: