animation:アニメーションに関する指定をまとめて行う

初期値 各プロパティの初期値
適用対象 全ての要素、疑似要素
継承 しない
アニメーション 離散値
対応ブラウザ caniuseで確認

animationプロパティの説明

animationは、アニメーションに関するスタイルを一括で指定するショートハンド・プロパティです。アニメーションの開始タイミングや、再生時間、再生速度など、各パラメーターを制御するために用意された個別のプロパティを用いることなく、それらをひとまとめに記述したい場合に使用します。

animationは、最大で8つのプロパティをひとまとめに操作します。各値を半角スペースで区切って列記していくことで、アニメーションを完成させることができます。基本的に値を書く順番は以下のリストの通りで、<time>を表す数値は、最初の値がanimation-duration、二番目の値がanimation-delayであると解釈されます。キーワード型の値は、他のプロパティのものと競合してはならず、特にanimation-nameは任意の文字列を指定できるため、最後に書いた方が安全であると言えます。

animationに指定できる値

<time>(duration値)
アニメーションが一周するまでにかかる時間を指定します。delay値よりも先に記載します。animation-durationで使用できる値を指定して下さい。
<easing-function>
アニメーションの変化速度を指定します。animation-timing-functionで使用できる値を指定して下さい。
<time>(delay値)
アニメーションが開始するタイミングを指定します。duration値よりも後に記載します。animation-delayで使用できる値を指定して下さい。
<single-animation-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プロパティの構文は以下の通りです。

CSS
/* @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で時間軸を制御します。

CSS
#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%; }
}
HTML
<div id="as_move">1</div>
表示確認

上記の内容を応用して、色を変化させるアニメーションに変更した例です。

CSS
#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; }
}
HTML
<div id="as_bgc">2</div>
表示確認

animationプロパティの値を再確認

animationプロパティは、CSSアニメーションに関する機能を一括で指定するショートハンド・プロパティです。ここで指定される値は、数値やキーワードが混在しており、記述する順番を誤ると機能しないことがあります。そのような事態を防ぐために、個別のプロパティに分解して理解することをお勧めします。例えば、以下の内容は同じアニメーションを表し、初期値で問題ないものは省略されています。

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を先頭に書くことも可能ですが、他のキーワード系の値と競合しないように注意して下さい。

animationに関連するCSSプロパティ

アニメーション
animation アニメーションに関する指定をまとめて行う
animation-name アニメーションの名前を定義する
animation-duration アニメーションの再生一回分の時間の長さを指定する
animation-timing-function アニメーションの再生タイミングに変化を付ける
animation-delay アニメーションが開始するタイミングを指定する
animation-iteration-count アニメーションの繰り返し回数を指定する
animation-direction アニメーションの再生方向を指定する
animation-fill-mode アニメーションが再生されていない時にどのような状態で待機するかを指定する
animation-play-state アニメーションを再生させるか一時停止させるか指定する