こんにちは、くーへいです。
先日、CSS3の仕様書を全て読んでまとめてみたのですが、その中でいくつか気になるモジュールがあったので、順次まとめて行こうと思っています。
今回はみんな大好き、アニメーションです！
jQueryなどのJavaScriptを用いれば可能なことはご存知かもしれませんが、今回はCSSだけで行うアニメーションです。
グローバルナビゲーションなどでも用いられている、みょーんとなるアレですね。
IE8やIE9では対応していませんので、スマホサイトが中心になるかもしれませんが、今後のトレンドとなっていくことは間違いないでしょう。
CSS3におけるトランジション（transition）とアニメーション（animation）の違い
パッと見では分かりにくいのですが、違いは以下の通りです。
- トランジションが:hoverなどのきっかけが必要なのに対し、アニメーションは設定が可能
- トランジションでは実行後に元のプロパティ値に戻る
- アニメーションでは細かい設定が可能
「transitionはお手軽なアニメーション、animationは本格的なアニメーション」と覚えておけば問題ないでしょう。
対応ブラウザ
CSS3のトランジションおよびアニメーションの対応ブラウザは以下の通りです。
アニメーションでwebkit系においてはベンダープレフィックスが必要になる以外は、大きな違いがありません。
トランジション（transition）
| PC | iOS | Android | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| IE6 | IE7 | IE8 | IE9 | IE10 | IE11 | Firefox | Chrome | Safari | Safari | 標準 ブラウザ |
Chrome | Firefox |
| × | × | × | × | ◯ | ◯ | ◯ | ◯ | ◯ | ◯ | ◯ | ◯ | ◯ |
アニメーション（animation）
| PC | iOS | Android | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| IE6 | IE7 | IE8 | IE9 | IE10 | IE11 | Firefox | Chrome | Safari | Safari | 標準 ブラウザ |
Chrome | Firefox |
| × | × | × | × | ◯ | ◯ | ◯ | △ | △ | △ | △ | △ | ◯ |
※Chrome、Safari、Android標準ブラウザではベンダープレフィックスが必要
※Android標準ブラウザではバージョン2系や3系でバグがあるので注意
CSS3のトランジション（transition）で出来ること
トランジションのプロパティは以下の通りです。
- transition-propertyプロパティ・・・トランジションを適用するプロパティを指定します
- transition-durationプロパティ・・・トランジションにかける時間を指定します
- transition-timing-functionプロパティ・・・トランジション実行中の変更速度を指定できます
- transition-delayプロパティ・・・トランジション実行やプロパティ変更の際の待ち時間を指定します
- transitionプロパティ（ショートハンド）・・・上記4プロパティのショートハンドです
各プロパティの細かい値は以下の通りです。
transition-propertyプロパティ
トランジションを適用するプロパティを指定します。
ここでいうプロパティとは、CSSのプロパティを指していて、以下のプロパティが指定できます。
また、下記のリストには載っていませんが、各ショートハンド（background等）も使用できるようです。
| 指定できるプロパティ名 | 指定できる値 |
|---|---|
| background-color | 色 |
| background-position | 長さ、パーセント、calc()のリスト |
| border-bottom-color | 色 |
| border-bottom-width | 長さ |
| border-left-color | 色 |
| border-left-width | 長さ |
| border-right-color | 色 |
| border-right-width | 長さ |
| border-spacing | 長さのリスト |
| border-top-color | 色 |
| border-top-width | 長さ |
| bottom | 長さ、パーセント、calc() |
| clip | rect() |
| color | 色 |
| font-size | 長さ |
| font-weight | フォントの厚み |
| height | 長さ、パーセント、calc() |
| left | 長さ、パーセント、calc() |
| letter-spacing | 長さ |
| line-height | 数字、もしくは長さ |
| margin-bottom | 長さ |
| margin-left | 長さ |
| margin-right | 長さ |
| margin-top | 長さ |
| max-height | 長さ、パーセント、calc() |
| max-width | 長さ、パーセント、calc() |
| min-height | 長さ、パーセント、calc() |
| min-width | 長さ、パーセント、calc() |
| opacity | 数字 |
| outline-color | 色 |
| outline-width | 長さ |
| padding-bottom | 長さ |
| padding-left | 長さ |
| padding-right | 長さ |
| padding-top | 長さ |
| right | 長さ、パーセント、calc() |
| text-indent | 長さ、パーセント、calc() |
| text-shadow | shadowのリスト |
| top | 長さ、パーセント、calc() |
| vertical-align | 長さ |
| visibility | visibilityの値 |
| width | 長さ、パーセント、calc() |
| word-spacing | 長さ |
| z-index | 整数 |
transition-duration
現在のプロパティから、イベント後のプロパティに完全に変化するまでの時間を指定します。
初期値は0sです。
0sであれば瞬時に切り替わります。
2sとすると、完全に切り替わるのに2秒かけることになります。
transition-timing-function
サンプル
マウスオーバーすると、横幅と背景色が2秒かけて変化します。
ease
linear
ease-in
ease-out
ease-in-out
step-start
step-end
steps()
cubic-bezier()
解説
プロパティの変化の速度を指定します。
一定の速度で切り替わったり、最初と最後だけ遅かったり、ということが指定可能です。
下記の値が指定可能です。
初期値はeaseです。
- ease・・・滑らかに変化します（最初と最後がゆっくり）。cubic-bezier(0.25, 0.1, 0.25, 1)と同じ値です。
- linear・・・一定の速度で変化します。cubic-bezier(0, 0, 1, 1)と同じ値です。
- ease-in・・・最初はゆっくりで、だんだん速くなります。cubic-bezier(0.42, 0, 1, 1)と同じ値です。
- ease-out・・・最初は速く、だんだんゆっくりになります。cubic-bezier(0, 0, 0.58, 1)と同じ値です。
- ease-in-out・・・easeと似ていますが、速度が異なります。cubic-bezier(0.42, 0, 0.58, 1)と同じ値です。
- step-start・・・滑らかな変化ではなく、一瞬で変化します。step-startは乗せた瞬間に変化しますので、通常のhoverと同様の動きに見えます。steps(1, start)と同じ値です。
- step-end・・・こちらも、一瞬で変化しますが、transition-durationの時間がたった後で変化します。steps(1, end)と同じ値です。
- steps(数字, start or end)・・・1つ目の引数は数字、2つ目の引数はstartかendとなっている必要があります。1つ目の引数はいくつのステップを踏むかを設定します。2つ目の引数はstartであれば、イベントが起きた瞬間に1ステップ目が実行されます。endであれば、イベントが起きた瞬間は変化がないように見えます。下の例であれば、steps(3,start)のときは0s、0.66s、1.33sに変化がありますし、steps(3,end)の時は0.66s、1.33s、2sの時に変化があります。
- cubic-bezier(数字, 数字, 数字, 数字)・・・ベジェ曲線の形を指定します。いずれの数字も小数点が指定できます。最初と3番目の引数は0～1の間となっている必要があります。引数は必ず4つになっている必要があります。
transition-delay
指定した秒数だけ、イベントの発生を遅らせます。
transition-delay:1sと指定すれば、1秒間は何も起きません。
transition（ショートハンド）
上記の4プロパティを1度に指定できます。
transition:transition-property transition-duration transition-timing-function transition-delay;
のように指定します。
ただし、transition-propertyプロパティの分だけ、カンマで区切る必要があります。
上記のeaseにおけるサンプルでいうと、下記のように書き換えられます。
transition:background 2s ease 1s,width 2s ease 1s;
なお、Chromeではtransition-propertyを省略すると、all（全てのプロパティに適用）と解釈されました。
CSS3のアニメーション（animation）で出来ること
それでは、アニメーションで出来ることを、トランジションと比較しながら見て行きましょう。
アニメーションのプロパティは以下の通りです。
- animation-nameプロパティ・・・アニメーションに対して名前を付けます。
- animation-durationプロパティ・・・アニメーション1回の実行にかける時間を指定します
- animation-timing-functionプロパティ・・・アニメーション実行中の変更速度を指定できます
- animation-iteration-countプロパティ・・・アニメーションを繰り返す数を指定します
- animation-directionプロパティ・・・アニメーションを繰り返す際、アニメーションの方向を反対にする等の指定ができます
- animation-play-stateプロパティ・・・アニメーションの実行、および停止を指定できます
- animation-delayプロパティ・・・アニメーション実行やプロパティ変更の際の待ち時間を指定します
- animation-fill-modeプロパティ・・・アニメーション実行後、当該要素のスタイルを元に戻さず、変化したままのスタイルを維持するかどうかを指定できます
- animationプロパティ（ショートハンド）・・・上記8プロパティのショートハンドです
勘のいい人は気づいたかもしれませんが、上記のプロパティだけではどの部分をアニメーションさせるかが指定できません。
そこで、「@keyframes」ルールを使用します。
- @keyframesルール・・・animation-nameを指定して、各アニメーションの進行状況ごとに変化させるプロパティを指摘できます。
animation-name
アニメーションに対して名前を付けます。
名前がない場合はアニメーションが実行されません。
アニメーションの名前は@keyframesルールで使用することができ、アニメーション中の中間点におけるスタイルも指定できます。
@keyframes
動きがすごくキモイですが、こんな感じみょーんと動きます。
下記のような形式で、通過点ごとのスタイルを指定します。
@keyframes アニメーション名 {
通過点{}
}
アニメーション名はanimation-nameプロパティで指定したもの、通過点は「to」、「from」、「パーセント」のいずれかで指定できます。
コンマで区切って複数記載することも可能です。
例としては、以下の通りです。
@keyframes example {
0% { width: 100px; background-color: #000; }
30% { width: 50px; }
60%, 80% { width: 150px; }
100% { width: 200px; background-color: #fff; }
}
上のサンプルでは、60%, 80%と同じスタイルを指定していることで、その間は動きが止まっているのがわかります。
また、途中で一部スタイルを指定しなかったとしても、補完できるスタイルであれば自動で保管してくれます。
animation-duration
トランジションと同様にアニメーションにかける時間を指定しますが、アニメーションの場合は、この時間は1回の実行にかける時間を意味します。
animation-timing-function
こちらもトランジションと同様にアニメーション実行中の変更速度を指定できます。
詳細は「transition-timing-function」の項を参考にしてください。
なお、@keyframesルール時にはアニメーション全体の変更速度を指定することはできず、各キーフレーム間における変更速度を指定することになります。
animation-iteration-count
アニメーションの繰り返し回数を指定します。
infinite、もしくは数字が指定できます。
初期値は1です。
infiniteを指定すると、無限に繰り返します。
animation-direction
サンプル
normal
reverse
alternate
alternate-reverse
解説
アニメーションの実行方向を指定します。
指定できる値は以下の通り。
初期値はnormal
- normal・・・標準の方向で実行します
- reverse・・・逆順で実行します
- alternate・・・繰り返し回数が奇数の場合は標準、偶数の場合は逆順で実行します
- alternate-reverse・・・繰り返し回数が奇数の場合は逆順、偶数の場合は標準で実行します
animation-play-state
:hover時にアニメーションを停止する例
解説
アニメーションが実行中か、停止中かを指定できます。
一見使い道がなさそうですが、マウスオーバー時は停止するなど、アイデア次第でいろいろな使い方ができます。
animation-duration
トランジションと同様にアニメーションのスタートまでの待ち時間を指定します。
マイナスを指定すると、繰り返し再生の際に指定秒だけ巻戻った状態からスタートします。
animation-fill-mode
サンプル
下記サンプルではややわかりづらいのですが、念のため掲載しておきます。
アニメーションは一回しか実行されませんので、リロードしてご覧ください。
none
forwards
backwards
both
解説
アニメーション実行後、当該要素のスタイルを元に戻さず、変化したままのスタイルを維持するかどうかを指定できます。
指定できる値は以下の通り。
none
変更後のスタイルを維持しません
forwards
アニメーション実行後のスタイルは、keyframesで通常は100%もしくはtoが指定されたものになります。
animation-directionやanimation-iteration-countの値によっては、下記のように変化します。
| animation-direction | animation-iteration-count | last keyframe encountered |
|---|---|---|
| normal | 偶数もしくは奇数 | 100% もしくは to |
| reverse | 偶数もしくは奇数 | 0% もしくは from |
| alternate | 偶数 | 0% もしくは from |
| alternate | 奇数 | 100% もしくは to |
| alternate-reverse | 偶数 | 100% もしくは to |
| alternate-reverse | 奇数 | 0% もしくは from |
※Mozilla Developer Networkより抜粋
backwards
アニメーション実行後のスタイルは、keyframesで通常は0%もしくはfromが指定されたものになります。
また、animation-delayで指定した時間中も、同様のスタイルが適用されます。
| animation-direction | first relevant keyframe |
|---|---|
| normal or alternate | 0% or from |
| reverse or alternate-reverse | 100% or to |
※Mozilla Developer Networkより抜粋
both
forwardsとbackwardsの両方の規定に従います。
animation
animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;
のように指定します。
ただし、animation-nameプロパティの分だけ、カンマで区切る必要があります。
まとめ
CSS3のみで出来るアニメーションについて解説してきましたが、いかがでしたでしょうか。
トランジションとアニメーションの2つがあってややこしいですが、覚えておいて損はないはずです。
PCにおける対応ブラウザが少々限られますが、幅広いブラウザで使用可能なのも魅力でしょう。
凝ったアニメーションでなければJavaScriptを使用する必要もなく、CSS3だけで実現できます。
是非、試してみて下さい！