© 2016 電脳 Papa 1 1310 Animation の指定項目（keyframes） CSS3 の animation プロパティを使用してアニメーションを動かすためには、＠キーフレー ムルール（@keyframes）の知識が必要です。@keyframes は、アニメーションの初めから終 わりまでの間のさまざまなポイントでのプロパティの値を指定して、アニメーションを変 化させることができます。@keyframes にはアニメーションの１サイクル分を指定します。 後で出てくる animation 関連プロパティと組み合わせることにより、アニメーションを１ 回だけでなく繰り返し実行させることができ、逆回転で実行させることもできます。 ■
@keyframes
値 説 明 アニメーション名 必須項目です。 スタイルルール アニメーションの内容 【@keyframes の書き方】 @keyframes アニメーション名 { スタイルルール } @-webkit-keyframes アニメーション名 { スタイルルール } または @keyframes アニメーション名 { スタイルルール } @-webkit-keyframes アニメーション名 { スタイルルール } ※後で出てくる animation-name プロパティには複数のアニメーション名を指定できます。 animation-name プロパティで指定したアニメーション名で@keyframes のアニメーション名 が検索され、一致するアニメーション名をもつ@keyframes のスタイルルール（アニメーシ ョン内容）が実行されます。animation-name: trans, colorChg, sizeChg;
@keyframes trans { スタイルルール } @keyframes colorChg { スタイルルール } 実行される 実行される 同一名称の@keyframesが ないので実行されない ＠キーフレームルール
© 2016 電脳 Papa 2 スタイルルール（アニメーションの内容）は、全体を{ }で囲みます。その中に①パーセ ントまたは②キーワードの「from」または「to」でアニメーションの開始と終了を指定、 および途中のポイントを指定し、{ }の中にアニメーションさせるプロパティの変化値を 指定して、変化のリストを記述します。 パーセントはアニメーションの１サイクル分のうちの比率を指定します。キーワード 「from」は「0%」、キーワード「to」は「100%」と同じことです。 @keyframes はアニメーションの１サイクル分の時間内の各ポイントの時点での変化の指定 をしたもので、「タイムラインテーブル」、「タイムラインリスト」または単に「タイムライ ン」とも呼ばれます。 〔＠キーフレームルールの記述例〕
つぎの@keyframes は、要素（ボックス）を left: 5px;から left: 495px;へ移動させる指 定です。 @keyframes trans { from { left: 5px; } to { left: 495px; } } @-webkit-keyframes trans { from { left: 5px; } to { left: 495px; } } ※from は 0%、to は 100%と書き換えても構いません。 つぎの@keyframes は、要素（ボックス）の色を赤色から 25%経過後に黄色に、50%経過後 に黄緑色に、 75%経過後に青色に、最後に紫色に変化させる指定です。 @keyframes colorChg { 0% { background-color: red; } 25% { background-color: yellow; } 50% { background-color: lime; } 75% { background-color: blue; } 100% { background-color: magenta; } } @-webkit-keyframes colorChg { 0% { background-color: red; } 25% { background-color: yellow; }
© 2016 電脳 Papa 3 50% { background-color: lime; } 75% { background-color: blue; } 100% { background-color: magenta; } } これら２つの@keyframes を同時に適用すると、次のようなアニメーションになります。 left: 5px;から left: 495px;へ移動する間に徐々に色が変化していきます。 100% 75% 50% 25% 0%
from
to
left 5px left 495px サンプルファイルの KeyFrames.html と KeyFrames.css を動かしてみてください。 スタイルルール（アニメーションの内容）の中のキーワード from、to または 0%、100%に空 白の{ }が記述されている場合は、要素（ボックス）の最初の状態を表します。 from { } または 0% { } ・・・ 要素（ボックス）の最初の状態から始まります。 to { } または 100% { } ・・・ 要素（ボックス）の最初の状態に戻ります。 途中の空白の{ }は「何も指定されていない」と解釈されて無視されます（最初の状態では ありません）。 30% { } ・・・ 何も指定されていないと解釈されて無視されます。 60% { } ・・・ 何も指定されていないと解釈されて無視されます。© 2016 電脳 Papa 4 〔animation プロパティについて〕 @keyframes を使用してアニメーションさせるために、変化させたい要素（ボックス）には animation プロパティの指定をします。 ■
animation ～
要素（ボックス）をアニメーションで変化させるためには、CSS に次の項目を記述します。 プロパティ 説 明 animation-name アニメーション名を指定する。 animation-duration アニメーションの１サイクルに掛かる時間を指定する。 animation-timing-function アニメーションのタイミング・進行割合を指定する。 animation-delay アニメーションがいつ始まるかを指定する。 animation-iteration-count アニメーションの繰り返し回数を指定する。 animation-direction animation-fill-mode animation-play-state アニメーションが再生中か、休止中かを指定する。 animation 上記項目をまとめて指定する。（ショートハンドと呼ぶ。） アニメーションを通常進行させるか、逆進行させるかを 指定する。 アニメーションが終了したときに、終了した状態にする か、開始前の状態にするかを指定する。 各プロパティの使い方はこの後の章から詳しく解説するので、ここでは書き方のイメージ をつかむだけでいいです。 【animation プロパティの書き方】animation-name: trans, colorChg, sizeChg; animation-duration: 5s, 5s, 3s;
animation-timing-function: linear, linear, ease-in, ease-out; animation-delay: 0s, 1s;
animation-iteration-count: 2; animation-direction: alternate;
animation-fill-mode: backwards, forwards, forwards; animation-play-state: running;
-webkit-animation-name: trans, colorChg, sizeChg; -webkit-animation-duration: 5s, 5s, 3s;
-webkit-animation-timing-function: linear, linear, ease-in, ease-out; -webkit-animation-delay: 0s, 1s;
-webkit-animation-iteration-count: 2; プロパティ
© 2016 電脳 Papa 5
-webkit-animation-direction: alternate;
-webkit-animation-fill-mode: backwards, forwards, forwards; -webkit-animation-play-state: running; animation プロパティ（animation-～）の記述は、変化させたい要素（ボックス）に適用す るスタイルの記述と一緒に記述します。 #ballBox { top: 5px; left: 5px; width: 100px; height: 100px; border: solid 2px #000000; border-radius: 50%; background-color: red; position: absolute;
animation-name: trans, colorChg, sizeChg; animation-duration: 5s;
animation-timing-function: ease-in, linear, ease-out; animation-delay: 0s;
animation-iteration-count: infinite; animation-direction: normal;
animation-fill-mode: backwards;
animation-play-state: running, paused, running;
-webkit-animation-name: trans, colorChg, sizeChg; -webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-in, linear, ease-out; -webkit-animation-delay: 0s;
-webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal;
-webkit-animation-fill-mode: backwards;
-webkit-animation-play-state: running, paused, running; } @keyframes trans { from { } to { left: 495px; } } @-webkit-keyframes trans { from { } to { left: 495px; } } @keyframes colorChg { 0% { } 25% { background-color: yellow; } 要素（ボックス） 要素（ボックス）に 適用するスタイル animation プロパティ
© 2016 電脳 Papa 6
animation の仕様は、2013 年 2 月に W3C（World Wide Web Consortium：Ｗｅｂ技術標準化 団体）で草案（Working Draft）としてまとめられました。以後、各ブラウザが草案段階の 仕様を先行して独自に実装しているため、プロパティの先頭にベンダープレフィックスを 付けて、記述する必要がありました。
例えば、animation-name プロパティの場合は、 animation-name W3C 標準仕様
-webkit- animation-name Safari、Google Chrome 用（Webkit 系ブラウザ） -moz- animation-name Firefox 用（Mozzila 系ブラウザ）
-ms- animation-name IE（Internet Explorer）用 -o- animation-name Opera 用
のように記述する必要がありました。
しかし 2016 年現在では、ブラウザのメーカーにより W3C 標準仕様への対応が進められ、 Safari を除いては W3C 標準仕様の記述だけでアニメーションが動くようになっています。 将来は世界標準となる仕様なので後れを取らないように実装しているものと思われます。 ですから今後は W3C 標準仕様と-webkit-の２つだけの記述で済むようになっています。 animation-name W3C 標準仕様（Google Chrome、Firefox、IE、Opera 用） -webkit- animation-name Safari、Google Chrome 用（Webkit 系ブラウザ）
※Google Chrome は W3C 標準仕様および Webkit 系ブラウザ仕様の両方に対応しています。 50% { background-color: lime; } 75% { background-color: blue; } 100% { background-color: magenta; } } @-webkit-keyframes colorChg { 0% { } 25% { background-color: yellow; } 50% { background-color: lime; } 75% { background-color: blue; } 100% { background-color: magenta; } }
