Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

  1. トップページ
  2. CSSプロパティ辞典
  3. animation

animation

『animation』プロパティは要素をアニメーションさせることができます。『transition』プロパティはCSSの擬似クラスやJavaScriptによるデザインの変化等をきっかけとする動作となりますが、『animation』プロパティを使用するとそういったデザイン変化をきっかけとすることなく自動的にアニメーションさせることができます。

『animation』プロパティを指定するときは、アニメーションの時間などの設定とは別に『@keyframes』でアニメーション本体の動作を構築する必要があります。

ブラウザのバージョンによっては、ベンダープレフィックス『webkit』、『moz』、『ms』等を付けないと動かない場合があるので使用する際はベンダープレフィックスを付けるようにした方が無難です。またPCのスペックによっては動きがカクついてしまう場合がありますのでご注意下さい。

サンプルコード
div {
	animation: hogeanime1 3s;
	-webkit-animation: hogeanime1 3s;
	-moz-animation: hogeanime1 3s;
	-ms-animation: hogeanime1 3s;
}

@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
指定可能プロパティ一覧
プロパティ一覧初期値概要
animation-namenoneアニメーション名を指定します。
animation-duration0sアニメーション一回分の時間を指定します。
animation-timing-functioneaseアニメーション変化のタイミングや進行割合を指定します。
animation-delay0sアニメーション開始の待ち時間を指定します。
animation-iteration-count1アニメーションの繰り返し回数を指定します。
animation-directionnormalアニメーションを交互に反転再生させるかどうかを指定します。
animation-fill-modenoneアニメーションの再生前、再生後の状態を指定します。

上記のプロパティは半角スペースで区切る事により『animation』でまとめて指定することができます。指定の順番は

  1. 『アニメーション名』(animation-name)
  2. 『アニメーション一回分の時間』(animation-duration)
  3. 『アニメーションのタイミングや進行割合』(animation-timing-function)
  4. 『アニメーション開始の待ち時間』(animation-delay)
  5. 『アニメーションの繰り返し回数』(animation-iteration-count)
  6. 『アニメーションを交互に反転再生させるかどうか』(animation-direction)
  7. 『アニメーションの開始前と終了後の状態』(animation-fill-mode)

になります。省略した時は初期値が指定されているものとして反映されます。

まとめて指定する場合の順番に関する公式の資料が見つからなかった為、各値を省略せず上記の順番でしっかりと記述したほうが無難かもしれません。

div {
	animation: 『アニメーション名』(animation-name)、『アニメーション一回分の時間』(animation-duration)、『アニメーションのタイミングや進行割合』(animation-timing-function)、『アニメーション開始の待ち時間』(animation-delay)、『アニメーションの繰り返し回数』(animation-iteration-count)、『アニメーションを交互に反転再生させるかどうか』(animation-direction)、『アニメーションの開始前と終了後の状態』(animation-fill-mode);
	-webkit-animation: 『アニメーション名』(animation-name)、『アニメーション一回分の時間』(animation-duration)、『アニメーションのタイミングや進行割合』(animation-timing-function)、『アニメーション開始の待ち時間』(animation-delay)、『アニメーションの繰り返し回数』(animation-iteration-count)、『アニメーションを交互に反転再生させるかどうか』(animation-direction)、『アニメーションの開始前と終了後の状態』(animation-fill-mode);
	-moz-animation: 『アニメーション名』(animation-name)、『アニメーション一回分の時間』(animation-duration)、『アニメーションのタイミングや進行割合』(animation-timing-function)、『アニメーション開始の待ち時間』(animation-delay)、『アニメーションの繰り返し回数』(animation-iteration-count)、『アニメーションを交互に反転再生させるかどうか』(animation-direction)、『アニメーションの開始前と終了後の状態』(animation-fill-mode);
	-ms-animation: 『アニメーション名』(animation-name)、『アニメーション一回分の時間』(animation-duration)、『アニメーションのタイミングや進行割合』(animation-timing-function)、『アニメーション開始の待ち時間』(animation-delay)、『アニメーションの繰り返し回数』(animation-iteration-count)、『アニメーションを交互に反転再生させるかどうか』(animation-direction)、『アニメーションの開始前と終了後の状態』(animation-fill-mode);
}
ブラウザでの表示結果
div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s infinite;
	-webkit-animation: hogeanime1 3s infinite;
	-moz-animation: hogeanime1 3s infinite;
	-ms-animation: hogeanime1 3s infinite;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

アニメーションさせることができます。『animation』プロパティを使用する際は『animation』の記述とは別に『@keyframes』も指定しなくてはなりませんのでご注意下さい。

『@keyframes』の記述方法は『@keyframes』という記述の後に任意の『アニメーション名』書き、その後に『{}』で囲い、その中で進行状態に合わせたプロパティの変化を『0%』から『100%』の間で記述します。進行状態は『0%』が開始時、『100%』が終了時です。『0%』は『from』、『100％』は『to』という単語で記述することもできますが、『%』で指定するのが一般的です。

/* 以下のように『{}』で囲い、その中で変化のタイミングと状態を指定します。 */
@keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	50% { width: 300px;}
	100% { width: 400px;}
}

以下がサンプルです。

div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s infinite;
	-webkit-animation: hogeanime1 3s infinite;
	-moz-animation: hogeanime1 3s infinite;
	-ms-animation: hogeanime1 3s infinite;
}
@keyframes hogeanime1 {
	0% { width: 200px; background: #f00;}
	70% { background: #ff0;}
	80% { background: #ff0;}
	100% { width: 400px; background: #ff0;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px; background: #f00;}
	70% { background: #ff0;}
	80% { background: #ff0;}
	100% { width: 400px; background: #ff0;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px; background: #f00;}
	70% { background: #ff0;}
	80% { background: #ff0;}
	100% { width: 400px; background: #ff0;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px; background: #f00;}
	70% { background: #ff0;}
	80% { background: #ff0;}
	100% { width: 400px; background: #ff0;}
}

アニメーションの繰り返し回数は指定した回数アニメーションを繰り返してくれます。指定できる値は『数値』と『infinite』になります。『数値』の場合は指定した回数繰り返し、『infinite』の場合は無限に繰り返します。

『animation-iteration-count』プロパティの値一覧
値効果
数値アニメーションを繰り返す回数を指定します。（初期値は1）
infiniteアニメーションを無限に繰り返します。
div.hoge1 {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s 3;
	-webkit-animation: hogeanime1 3s 3;
	-moz-animation: hogeanime1 3s 3;
	-ms-animation: hogeanime1 3s 3;
}

div.hoge2 {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s infinite;
	-webkit-animation: hogeanime1 3s infinite;
	-moz-animation: hogeanime1 3s infinite;
	-ms-animation: hogeanime1 3s infinite;
}

@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

アニメーションの反転再生等を設定する『animation-direction』の値を指定することでアニメーションを逆方向（100%から0%）などの動作に変更することができます。『animation-direction』の値を指定していない場合は『@keyframe』で設定した『0%』から『100%』のアニメーションを繰り返す動作になります。

『animation-direction』プロパティの値一覧
値効果
normal通常の方向(0%から100%)にアニメーションします。これが初期値です。
alternate奇数の回数では通常の方向(0%から100%)にアニメーションし、
偶数の回数では逆の方向(100%から0%)にアニメーションします。
reverse逆の方向(100%から0%)にアニメーションします。
alternate-reverse偶数の回数では通常の方向(0%から100%)にアニメーションし、
奇数の回数では逆の方向(100%から0%)にアニメーションします。
div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s infinite normal;
	-webkit-animation: hogeanime1 3s infinite normal;
	-moz-animation: hogeanime1 3s infinite normal;
	-ms-animation: hogeanime1 3s infinite normal;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}


div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s infinite alternate;
	-webkit-animation: hogeanime1 3s infinite alternate;
	-moz-animation: hogeanime1 3s infinite alternate;
	-ms-animation: hogeanime1 3s infinite alternate;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}


div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s infinite reverse;
	-webkit-animation: hogeanime1 3s infinite reverse;
	-moz-animation: hogeanime1 3s infinite reverse;
	-ms-animation: hogeanime1 3s infinite reverse;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}


div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s infinite alternate-reverse;
	-webkit-animation: hogeanime1 3s infinite alternate-reverse;
	-moz-animation: hogeanime1 3s infinite alternate-reverse;
	-ms-animation: hogeanime1 3s infinite alternate-reverse;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

『animation-delay』プロパティはアニメーション開始の待ち時間を指定することができます。

div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s 2s infinite alternate;
	-webkit-animation: hogeanime1 3s 2s infinite alternate;
	-moz-animation: hogeanime1 3s 2s infinite alternate;
	-ms-animation: hogeanime1 3s 2s infinite alternate;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

『animation-timing-function』プロパティの値を指定するとアニメーション変化のタイミングや変化割合等を変更することができます。

『animation-timing-function』プロパティの値一覧
値効果
ease開始付近と終了付近の動きを滑らかにします。『animation-timing-function』の指定を省略した場合はこの『ease』が指定されているものとして扱われます。
linear一定の速度で変化します。
ease-in開始付近の動きを緩やかにします。
ease-out終了付近の動きを緩やかにします。
ease-in-out開始付近と終了付近の動きを緩やかにします。
div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s ease infinite alternate;
	-webkit-animation: hogeanime1 3s ease infinite alternate;
	-moz-animation: hogeanime1 3s ease infinite alternate;
	-ms-animation: hogeanime1 3s ease infinite alternate;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}


div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s linear infinite alternate;
	-webkit-animation: hogeanime1 3s linear infinite alternate;
	-moz-animation: hogeanime1 3s linear infinite alternate;
	-ms-animation: hogeanime1 3s linear infinite alternate;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}


div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s ease-in infinite alternate;
	-webkit-animation: hogeanime1 3s ease-in infinite alternate;
	-moz-animation: hogeanime1 3s ease-in infinite alternate;
	-ms-animation: hogeanime1 3s ease-in infinite alternate;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}


div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s ease-out infinite alternate;
	-webkit-animation: hogeanime1 3s ease-out infinite alternate;
	-moz-animation: hogeanime1 3s ease-out infinite alternate;
	-ms-animation: hogeanime1 3s ease-out infinite alternate;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}


div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s ease-in-out infinite alternate;
	-webkit-animation: hogeanime1 3s ease-in-out infinite alternate;
	-moz-animation: hogeanime1 3s ease-in-out infinite alternate;
	-ms-animation: hogeanime1 3s ease-in-out infinite alternate;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

『animation-fill-mode』プロパティを使用するとアニメーションの開始前と終了後をどのような状態にするのか指定することができます。アニメーション開始前とは『animation-delay』でアニメーション開始が待たされている間の事を指しますのでご注意下さい。

『animation-fill-mode』プロパティの値一覧
値効果
noneアニメーションで指定されたスタイルをアニメーションの開始前と終了後に適用しません。これが初期値です。
forwardsアニメーション終了の状態がそのまま維持されます。通常だと『100%』、または『to』で指定しているスタイルになります。
※『animation-direction』で逆再生している場合は『0%』、または『from』で指定しているスタイルになります。
backwardsアニメーション再生前の状態がアニメーションで指定した最初の値になります。通常だと『0%』、または『from』で指定しているスタイルになります。
※『animation-direction』で逆再生している場合は『100%』、または『to』で指定しているスタイルになります。
both『forwards』と『backwards』を両方指定した状態になります。

以下がサンプルです。『animation-fill-mode』のサンプルは、アニメーション回数を3回と指定しているので、動作確認をする場合はブラウザを更新して下さい。

div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s 3 none;
	-webkit-animation: hogeanime1 3s 3 none;
	-moz-animation: hogeanime1 3s 3 none;
	-ms-animation: hogeanime1 3s 3 none;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}


div {
	background: #f00;
	width: 200px;
	animation: hogeanime1 3s 3 forwards;
	-webkit-animation: hogeanime1 3s 3 forwards;
	-moz-animation: hogeanime1 3s 3 forwards;
	-ms-animation: hogeanime1 3s 3 forwards;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}


div {
	background: #f00;
	width: 300px;
	animation: hogeanime1 3s 2s 3 backwards;
	-webkit-animation: hogeanime1 3s 2s 3 backwards;
	-moz-animation: hogeanime1 3s 2s 3 backwards;
	-ms-animation: hogeanime1 3s 2s 3 backwards;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}


div {
	background: #f00;
	width: 300px;
	animation: hogeanime1 3s 2s 3 both;
	-webkit-animation: hogeanime1 3s 2s 3 both;
	-moz-animation: hogeanime1 3s 2s 3 both;
	-ms-animation: hogeanime1 3s 2s 3 both;
}
@keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-webkit-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-moz-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}
@-ms-keyframes hogeanime1 {
	0% { width: 200px;}
	100% { width: 400px;}
}

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。

シェア
このエントリーをはてなブックマークに追加