animationプロパティの説明
CSSのanimationプロパティは、アニメーションに関するスタイルを一括で指定するショートハンド・プロパティです。アニメーションの開始タイミングや、再生時間、再生速度など、各パラメーターを制御するために用意された個別のプロパティを用いることなく、それらをひとまとめに記述したい場合に使用します。
animationは、最大で8つのプロパティをひとまとめに操作します。各値を半角スペースで区切って列記していくことで、アニメーションを完成させることができます。基本的に値を書く順番は以下のリストの通りで、<time>を表す数値は、最初の値がanimation-duration、二番目の値がanimation-delayであると解釈されます。キーワード型の値は、他のプロパティのものと競合してはならず、特にanimation-nameは任意の文字列を指定できるため、最後に書いた方が安全であると言えます。
animation-duration：アニメーションの周期が一周する時間animation-timing-function：アニメーションの変化速度animation-delay：アニメーションが開始するまでの時間animation-iteration-count：アニメーションを繰り返す回数animation-direction：アニメーションを繰り返す祭の開始地点animation-fill-mode：アニメーションが終了した時点での状態animation-play-state：アニメーションの再生状態animation-name：@keyframeと関連付ける名前
animationに指定できる値
<time>（duration値）- アニメーションが一周するまでにかかる時間を指定します。
delay値よりも先に記載します。animation-durationで使用できる値を指定してください。 <easing-function>（timing-function値）- アニメーションの変化速度を指定します。
animation-timing-functionで使用できる値を指定してください。 <time>（delay値）- アニメーションが開始するタイミングを指定します。
duration値よりも後に記載します。animation-delayで使用できる値を指定してください。 <single-animation-iteration-count>（iteration-count値）- アニメーションが実行される回数を指定します。
animation-iteration-countで使用できる値を指定してください。 <single-animation-direction>- アニメーションが実行される方向を指定します。
animation-directionで使用できる値を指定してください。 <single-animation-fill-mode>- アニメーションの前後でスタイルをどのような状態にするかを指定します。
animation-fill-modeで使用できる値を指定してください。 <single-animation-play-state>- アニメーションの再生状態を指定します。
animation-play-stateで使用できる値を指定してください。 <custom-ident>,none@keyframesにアニメーションを関連付ける名前を指定します。animation-nameで使用できる値を指定してください。
animationの使い方とサンプルコード
animationプロパティの構文は以下の通りです。
/* @name | duration */
animation: key_name 5s;
/* @name | duration | easing-function | delay */
animation: key_name 5s linear 1s;
/* duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | @name */
animation: 3s ease-in 1s 2 reverse both paused key_name;
animationの実例
それでは簡単な例を見てみましょう。アニメーションを利用して要素の位置を変化させるサンプルです。animationプロパティで仕様を決めて、@keyframesで時間軸を制御します。
<div id="as_move">1</div>
#as_move {
padding: 10px;
width: 50px;
height: 50px;
background: #ccc;
text-align: center;
animation: 3s linear 0s infinite alternate as_move;
}
@keyframes as_move {
from { margin-left: 0%; } to { margin-left: 80%; }
}
上記の内容を応用して、色を変化させるアニメーションに変更した例です。
<div id="as_bgc">2</div>
#as_bgc {
padding: 10px;
width: 50px;
height: 50px;
text-align: center;
animation: 3s ease 0s infinite normal as_bgc;
}
@keyframes as_bgc {
0% { background-color: #ff0000; }
50% { background-color: #0000ff; }
100% { background-color: #ff0000; }
}
animationプロパティの値を再確認
animationプロパティは、CSSアニメーションに関する機能を一括で指定するショートハンド・プロパティです。ここで指定される値は、数値やキーワードが混在しており、記述する順番を誤ると機能しないことがあります。そのような事態を防ぐために、個別のプロパティに分解して理解することをお勧めします。例えば、以下の内容は同じアニメーションを表し、初期値で問題ないものは省略されています。
/* 個別のプロパティ */
#specific {
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: as_bgc;
}
/* ショートハンド・プロパティ */
#shorthand {
animation: 3s ease 0s infinite normal as_bgc;
}
/* 名前に対応したキーフレーム */
@keyframes as_bgc {
0% { background-color: #ff0000; }
50% { background-color: #0000ff; }
100% { background-color: #ff0000; }
}
書き方の順番は、基本的にここで紹介した内容の通りです。animation-nameを先頭に書くことも可能ですが、他のキーワード系の値と競合しないように注意してください。