読者です 読者をやめる 読者になる 読者になる

vol.30 CSS3のキーフレームでアニメーションをつくる

f:id:BOEL:20151118164631j:plain

こんにちは、デザイナーの菅野です。
サイトにアニメーションをつかうことによって、さまざまなインタラクションが

加えられ、表現をよりリッチにすることができます。

今回は、CSS3から使用できるようになったキーフレームをつかった

アニメーションについてご紹介します。

上のビジュアルもCSSアニメーションで表現しています。
魚のくねくねしている動きに関してはSVGモーフィングという手法を

つかっているのですが、これについてはまた別の機会でご紹介します。 

@keyframesって何?

@keyframesとは

@keyframesとは、CSSアニメーションの中でキーフレームと呼ばれる任意のポイントで
スタイルを指定することにより、複雑なアニメーションが可能になります。
具体的にどんなことができるのかは、後ほど実例とともに見ていきましょう。

対応ブラウザ

IE(10〜)
Firefox
Opera
Chrome
Safari
-webkit-や-moz-、-ms-などのベンダープレフィックスは忘れずにつけておきましょう。

プロパティ一覧
◯ animation-name

アニメーションを定義する名前を指定します。
ー 例 ー
animation-name: test1;

 

◯ animation-duration

一回のアニメーションにかかる時間を指定します。
ー 例 ー
animation-duration: 6s;

 
◯ animation-timing-function

アニメーションするときの変化の方法を指定します。
ー 例 ー
animation-timing-function: ease-in;

 

◯ animation-delay

アニメーションが始まるまでの遅延時間を指定します。
ー 例 ー
animation-delay: 3s;


◯ animation-iteration-count

アニメーションを行う回数を数値で指定します。

infinite
アニメーションを無限に繰り返します。

number(数字)
アニメーションを繰り返す回数。

ー 例 ー
animation-iteration-count: 3;


◯ animation-direction

アニメーションを反転させて再生するかどうかを指定します。

normal
毎回、通常方向のアニメーションを行います。

reverse
毎回、逆方向のアニメーションを行います。

alternate
通常再生と逆再生を交互に行います。

alternate-reverse
逆再生と通常再生を交互に行います。

ー 例 ー
animation-direction: normal;

 

◯ animation-play-state

アニメーションを一時停止、または再開することができます。

running
アニメーションを実行中。

paused
アニメーションを一時停止。

ー 例 ー
animation-play-state: paused;


◯ animation-fill-mode

アニメーションを実行する前後に、スタイルを適用するかどうかを指定します。

none
アニメーションで指定されたスタイルは、アニメーションの実行前や実行後には適用されません。
forwards
アニメーションの最後に適用されているスタイルの状態を維持します。

backwards
アニメーションの最初に適用されているスタイルの状態を維持します。

both
forwards と backwards の両方が指定されます。スタイルはアニメーションの実行前と実行後の両方が適用されます。

ー 例 ー
animation-fill-mode: forwards;

 

◯ ショートハンドでまとめて指定する場合は以下のような内容で書きます。

animation: name duration timing-function delay iteration-count direction fill-mode


実演

文字だけでは分かりにくいですよね。
それでは実際に実演していくと同時に、
どうやってアニメーションを発生させるかをみていきましょう。

.move_testはいままで説明したものをショートハンドでまとめたものです。
@keyframesの部分で動かしたい要素に
0%(スタート)から100%(アニメーション終了)までの間でCSSを指定してあげます。

.move_test{
animation: test 4s ease-in-out 2s infinite normal both;
-webkit-aanimation: test 4s ease-in-out 2s infinite normal both;
}
@keyframes test {
0% {transform: translateX(-150%); opacity: 0;}
30%{transform: translateX(4%); opacity: 1;}    
70%{transform: translateX(4%); color: red; opacity: 1;}
100% {transform: translateX(500%); opacity: 0;}    
}
@-webkit-keyframes test {
0% {-webkit-transform: translateX(-150%); opacity: 0;}
30%{-webkit-transform: translateX(4%); opacity: 1;}
70%{-webkit-transform: translateX(4%); color: red; opacity: 1;}
100% {-webkit-transform: translateX(500%); opacity: 0;}
}

まとめ

いかがでしたか?
今までJavaScriptFlashでつくらなればいけなかったアニメーションを

CSSで簡単に表現し、工夫次第で、CSSだけでもユーザーの目をひく
質の高いインタラクションを実現することができます。
IE10以降やグーグルクロームFirefox最新版などのモダンブラウザと

呼ばれるものであれば、遠慮なくつかえるので、ぜひ試してみてください。