[CSS] CSS3アニメーションのまとめ：transitionとanimationの基本

2013 年 4 月 11 日2013 年 6 月 24 日

Contents

1. transitionとanimationの違い
2. transition
3. animation
4. ベンダープレフィックス（接頭辞）

transitionとanimationの違い

taransition	:hoverなどと同じように、特定のアクションに対して要素を単純に状態変化させ、終了後に自動で逆のアニメーションで元に戻る
animation	Flashのように細かいアニメーションの設定をする

transition

transition（遷移）という名前のとおり、現在の状態から別の状態に遷移し、そして別の状態から元の状態に戻るアニメーションについて定義する。
アニメーションの終了後は自動で元の状態に戻る。
アニメーションの開始は、:hover、:activeなどの擬似クラスをきっかけに使う。

基本

transition関連のプロパティは「アニメーション前の初期状態を定義」し、それ以外は「アニメーションの終了時点の状態を定義」するというイメージ。

AdobeのFlashやAfterEffectsのようなものでいうなら、「トゥイーンの開始と終了するポイントにおけるキーフレームの状態を指定する」ことに近い。

各種プロパティ

以下の値で強調表示されているものが、初期値。

transition-property

transitionの対象となるCSSプロパティ（font-sizeなど）を指定。

適用できる値
all	すべて
none	なし（transitionの意味がない）
（各プロパティ名）	コンマ区切りで複数指定

transition-duration

アニメーション全体の時間を指定。

適用できる値
0s	すぐ変化（アニメなし）
秒	数値＋「s」（10秒なら「10s」）
ミリ秒	数値＋「ms」（10ミリ秒なら「10ms」）

マイナスの値を指定した場合は「0」とされる。

transition-timing-function

アニメーションの変化のパターンを指定。

いわゆるeasing（イージング）。easeとは「～を慎重に動かす」という意味。

jQuery#animate()やActionScriptのTweenerで指定するのと似たようなもの。

参考リンク

値をcubic-bezier()関数で指定する場合

（MDNより）

制御点P0（0.0）とP3（1.0）は固定なので、P1とP2のxとyの座標をそれぞれ指定する。

Adobe IllustratorやInkscapeでいえば、P0・P3がアンカーポイント、P1・P2がハンドルということになる。

/* P1（0.25, 0.1）、P2（0.25, 1.0）の場合 */
transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0) ;

値をsteps()関数で指定する場合

（MDNより）

値を階段関数を用いて指定。

単純化していえば、値の変化を直線的（liner）でも曲線的になめらか（cubic-bezier）にするのでもなく、上記のグラフのように階段状に変化していく。

steps(number_of_steps, direction)

number_of_steps

変化の段階（ステップ）の数を正の整数で指定。

direction

start	最初の段階がアニメーションの開始時に起こる。
end	最後の段階がアニメーションの終了後に起こる。

transition-timing-function: steps(3, start);

定義済みの値

以下のあらかじめ定められた定義値もある。

適用できる値
ease	ゆっくり入り、加速し、ゆっくり終わる cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear	一定の速度（等速直線運動） cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in	ゆっくり入り、加速して終わる cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out	速く入り、ゆっくり終わる cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out	easeよりも、ゆっくり入り、加速し、ゆっくり終わる cubic-bezier(0.42, 0, 0.58, 1.0)
step-start	すぐに最後の状態になる（アニメーションがない） steps(1, start)
step-end	ずっと最初の状態のまま（アニメーションがない） steps(1, end)

transition-delay

アニメーション開始を遅らせる時間を指定。

適用できる値
0s	すぐ変化（アニメなし）
秒	数値＋「s」（10秒なら「10s」）
ミリ秒	数値＋「ms」（10ミリ秒なら「10ms」）

マイナスの値を指定した場合はすぐ変化がはじめるが、その分だけ実際のアニメーションが途中から開始される。

たとえば、transition-durationが「3000ms」でtransition-delayが「-1000ms」の場合、アニメーションは本来の「1000ms」の状態から開始し、残りの2000ms（2秒）分だけ動く。

つまり、transition-delayでマイナス指定した分だけアニメーションがカットされる。

そこから元に戻るアニメーションも、マイナス指定した分だけ最初の部分がカットされる。

マイナスの値を指定した場合は、挙動がまったく別物だと憶えておこう。

対象プロパティを複数指定した場合

transition-propertyで複数のCSSプロパティを指定した場合、そのそれぞれにtransition-durationなど他のプロパティの値をコンマ区切りで指定できる。

transition-property: width, height;
transition-duration: 1s, 2s;

プロパティの数と設定の数が合わない場合

足らない場合

transition-property: width, height, color, background-color;
transition-duration: 1s, 2s;

指定された分がセットでくり返される。

つまり、以下と同じ。

transition-property: width, height, color, background-color;
transition-duration: 1s, 2s, 1s, 2s;

多い場合

transition-property: width, height;
transition-duration: 1s, 2s, 1s, 2s;

単純に、余りはカットされる。

transition-property: width, height;
transition-duration: 1s, 2s;

プロパティをまとめて指定

基本的に、以下の順序で指定したほうがいい。

transition-property transition-duration transition-timing-function transition-delay

すべての項目が省略可能で順不同だが、2つある時間指定の項目は上記の順番で解釈される。

transition: 2s 500ms;

たとえばこの場合、transition-durationが2s、transition-delayが500msと解釈される。

transition-propertyのターゲットごとに指定

設定をそれぞれまとめて、コンマ区切りで複数指定できる。

transition: width 1s ease 500ms, height 2s ease-in 300ms;

JavaScriptイベント

TransitionEventオブジェクト

プロパティ

propertyName

CSSプロパティの名前

elapsedTime

時間経過。transition-delayの値がなんであっても、影響されない。

psedoElement

トランジションが起きたCSS擬似要素の名前（文字列）。擬似クラスと区別するために、先頭にセミコロンが2つ付く（::first-lineなど）。

トランジションが起きたのが通常の要素の場合、空文字列になる。

イベントタイプ

transitionend

トランジションが完了したときに発生。完了前にJavaScriptでトランジション関連のプロパティを削除したりした場合は発生しない。

例

HTML

<div class="example-transition"></div>

CSS

/* 初期状態 */
.example-transition {
	width: 80px;
	height: 80px;
	background-color: red;
	
	transition: all 1s ease 200ms;
}

.example-transition:hover {
	width: 160px;
	height: 160px;
	background-color: blue;
}

transition関連のプロパティは、あくまで現在の（元の）状態を示す側に記述する。:hoverなどの側に書くと、挙動が意図したものではなくなってしまうので注意。

参考リンク

animation

:hoverなどのきっかけがなくても、即実行可能。
キーフレームを指定し、より細かいアニメーションが可能。
キーフレームの情報と通常の宣言を完全に分けて記述できるので、アニメーション情報を再利用しやすい。
ループさせられる。

基本

アニメーションさせたい要素にanimation関連のプロパティを設定し、各キーフレームの情報は@keyframesという@ 規則（@ルール）で書く。

一見するとtransitionのほうがシンプルなようにも思えるが、実際にはこちらのほうが直感的でわかりやすい。

@keyframes

「@keyframes + 固有名」で宣言。その中カッコ { } の内部で「%」指定でキーフレームの情報を書いていく。

0%（初期状態）はfrom、100%（終了時）はtoで置き換えられる。

この@keyframesは、下記のanimation-nameを指定するセレクタの前でなく、後でも構わない。

@keyframes sample {
	from {
		width: 50px;
	}
	50% {
		height: 80px;
	}
	to {
		width: 150px;
	}
}

Chrome、SafariといったWebKit系のブラウザでは、2013年4月12日現在の最新版でも「@keyframes」に対応しておらず、ベンダープレフィックスをつけた「@-webkit-keyframes」で指定しないと認識されない。

手元で確認したところ、Firefox、Operaの最新版ならば問題なく標準の「@keyframes」が使えた。

Firefoxならば「@-moz-keyframes」と書く。

いくらなんでも@keyframesまでブラウザごとに記述するのは煩雑すぎるので、SaasやLESSを使うか各種ジェネレーターを使ったほうがいいだろう。

各種プロパティ

animation-name

@keyframesで指定した名前を指定。

animation-duration

アニメーション全体の時間を指定。

（transition-durationと同じ）

適用できる値
0s	すぐ変化（アニメなし）
秒	数値＋「s」（10秒なら「10s」）
ミリ秒	数値＋「ms」（10ミリ秒なら「10ms」）

transition-timing-function

アニメーションの変化のパターンを指定。

（transition-timing-functionと同じ）

animation-delay

アニメーション開始を遅らせる時間を指定。

（transition-delayと同じ）

適用できる値
0s	すぐ変化（アニメなし）
秒	数値＋「s」（10秒なら「10s」）
ミリ秒	数値＋「ms」（10ミリ秒なら「10ms」）

マイナスの値を指定した場合はすぐ変化がはじめるが、その分だけ実際のアニメーションが途中から開始される。

くわしくは、transition-delayを参照。

animation-iteration-count

アニメーション全体をくり返す回数。

適用できる値
1	1回のみ
infinite	無限ループ
整数	0は再生されない。マイナスの数は0と解釈。

animation-direction

アニメーションをどちらの方向に再生するか。逆か否か。

また、アニメーションを2回以上くり返す場合、どちらの方向に再生するか。

適用できる値
normal	通常の再生をくり返すのみ
alternate	くり返しの際、偶数回は逆方向に再生
reverse	ずっと逆方向に再生
alternate-reverse	alternateとは逆。奇数回を逆方向、偶数回を正方向に再生。

alternateを指定した場合

「行って帰って行って帰って……」をくり返す。

1回目：正方向 ＝＞ 2回目：逆方向 ＝＞ 3回目：正方向 ＝＞ 4回目：逆方向……

つまり、奇数回は正方向に、偶数回は逆方向になる。alternate-reverseの場合はその逆になる。

逆方向への再生の場合、animation-timing-functionで指定した変化のパターンも逆になる。

たとえば、ease-in（ゆっくり入って加速）はease-out（速く入ってゆっくり終わる）になる。

また、animation-delayにマイナスの値を指定している場合、それぞれ冒頭部分が指定値の絶対数分カットされる。

animation-fill-mode

アニメーションの再生前、再生後の状態を指定。

適用できる値
none	要素の元のスタイルのまま
forwards	再生後、要素のスタイルは最後のキーフレームの状態のままになる。通常は100%（to）のまま、animation-directionの指定で逆方向に再生したあとの場合は、0%（from）のままになるということ。
backwards	再生前、要素のスタイルは最初のキーフレームの状態になる。通常は0%（from）、animation-directionの指定で逆方向に再生したあとの場合は、100%（to）になるということ。
both	再生前、要素のスタイルは最初のキーフレームの状態になり、再生後、要素のスタイルは最後のキーフレームの状態のままになる。 forwardsとbackwardsを両方指定するようなもの。

なぜこの設定が必要なるかというと、0%（from）が要素の初期状態ではなく、また、100%（to）が要素の最後の状態でもないため。

.sample {
	width: 80px;
	
	animation-name: abc;
	animation-duration: 1s;
}

@keyframes abc {
	form {
		width: 100px;
	}
	to {
		width: 200px;
	}
}

この場合、再生前／再生後――要するにアニメーションしていない間は、widthは80pxになる。

Flashなどに慣れた人間からすると違和感があるが、CSSのanimationでは要素そのもののスタイルとキーフレームでのスタイルを明確に分けているのでこうなる。

Flashなどのアニメーションと同じようにするには、bothを適用しておけばいい。

animation-play-state

再生中か一時停止か指定。

適用できる値
running	再生中
paused	一時停止

いずれにせよ、JavaScriptで制御するしかないのであまり意味がないプロパティ。おそらく、初期状態では一時停止にして、JavaScriptを使って任意のタイミングで再生させるために使う。

「他の方法で同じ効果を得られるという理由から仕様からの削除が検討」されているらしい（リンク）。使わないほうが無難。

プロパティをまとめて指定

基本的に、以下の順序で指定したほうがいい。

animation-name　animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-play-state

transitionと同じくすべての項目が省略可能で順不同だが、2つある時間指定の項目は上記の順番で解釈される。

animation: 2s 500ms;

たとえばこの場合、animation-durationが2s、animation-delayが500msと解釈される。

JavaScriptイベント

AnimationEventオブジェクト

プロパティ

animationName

animation-nameで指定された値

elapsedTime

秒単位の実数で示される時間経過。一時停止の状態だった時間と、animation-delayで指定された分は含まない。
animationstartイベントでは通常ゼロになるが、animation-delayがマイナスの値であった場合、elapsedTimeはアニメーションがカットされた分、すなわちanimation-delayの絶対値になる。

animation-delayが-2sだったら2.0になるということ）

psedoElement

アニメーションが起きたCSS擬似要素の名前。擬似クラスと区別するために、先頭にセミコロンが2つ付く（::first-lineなど）。

アニメーションが起きたのが通常の要素の場合、空文字列になる。

イベントタイプ

animationstart	アニメーションの実際のスタート時に発生。animation-delayで指定したあとに。
animationend	アニメーションが終了した際に発生。
animationiteration	アニメーションがくり返されるときに発生。あくまでくり返しのときのみで、アニメーションが終わるときはanimationendイベントのみが発生し、animationiterationイベントは発生しない。

例

HTML

<div class="sample-anim"></div>

CSS


.sample-anim {
	width: 80px;
	height: 30px;
	
	animation-name: abc;
	animation-duration: 4s;
	animation-delay: 500ms;
	animation-direction: alternate;
	animation-iteration-count: 5;
}

@keyframes abc {
	from {
		width: 100px;
		background-color: red;
	}
	50% {
		width: 125px;
	}
	to {
		width: 200px;
		background-color: blue;
	}
}

動作例

参考リンク

ベンダープレフィックス（接頭辞）

-webkit- -moz- -o- -ms-

CSS

Posted by takasho