CSSの変化をアニメーションさせるtransitionについてまとめたよ。（CSS おれおれ Advent Calendar 2012 – 22日目）

CSS おれおれ Advent Calendar 2012 – 22日目

(ヽ´ω`) oO( また日が昇ってからの更新になってしまった……。 )

前提：CSSにおけるアニメーションは以下の二種類あります。

• Transitions … 変化するもの
• Animations … 動き続けるもの

今回は前者について取り上げます。後者もいずれ。

概要

transitionは値の変化をアニメーションさせる、という事を指定するものです。

例えば青色をしたリンクにマウスカーソルを乗せると赤色になる、というような場面で、その変化を時間を付けて行わせる事ができます。

常に動き続けているようなアニメーションは、animateの方の領分です。

使える場面

あくまで「変化」を対象にしているため、何らかの（主に利用者の）操作が必要です。

なので、変化する状態を示す擬似クラス（:hoverとか）や、JavaScriptでの操作が必要になります。

あーちなみにJavaScriptから操作する場合は、要素のプロパティではなくクラスの方を操作すると、実装が綺麗になるかと思います。はい。

transitionプロパティ

基本的にはこんな感じです。

  transition: <property> <duration>;

<property>はCSSのプロパティの名前、<duration>は変化の所要時間です。

他にも遷移の仕方や開始の遅延を指定する事が出来ます。（後述）

手っ取り早く全てアニメーションさせる例

今のところベンダープレフィックスが必要な感じです。

* {
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}

IEは10から（ベンダープレフィックスなしで）サポートしています。

プロパティ名

colorやleftなどといった、プロパティ名を記述します。引用符等は不要です。

ベンダープレフィックス付きのプロパティは、その通りに記述する事が求められます。例えばtransformではなく-webkit-transformのようにしてやる必要があります。

またプロパティにはallという値を設定する事もできます。全てのプロパティが対象になります。なお、全て、といってもそもそもアニメーションするもの、しないものがあります。

所要時間

所要時間は2.5sのように記述します。（これは2.5秒 (seconds)の例。）

ちなみにCSSの仕様上、0台の小数点を持つ数値、例えば0.1はゼロを省略して.1のように記述する事ができます。

複数の指定

<property> <duration>はカンマ,で区切って複数指定する事ができます。allより個別に指定した方が、想定外の動きをする場面が少なくなるかと思います。

アニメーションするもの、しないもの

プロパティの値によって、アニメーションするかどうかが定まります。例えば書体font-familyなんかは対象外で、瞬時に変わります。（モーフィングみたいにはなりません。）

基本的には値が数値であればアニメーションすると考えて良いでしょう。

アニメーションするプロパティ一覧

visibilityは特殊

数値ではないのですが、「0か1か」という数だと考えられるみたいです。ただしあくまで「0か1か」で考えるので、絵的にはアニメーションしていないように見えます。

その他のプロパティ

また仕様には含まれていないものの、ブラウザーがアニメーションするよう実装しているものもあるようです。

以下はGeckoでサポートしている、らしいです。

• background-size
• border-*-radius
• box-shadow
• column-count
• column-gap
• column-rule-color
• column-rule-width
• column-width
• font-size-adjust
• font-stretch
• marker-offset
• text-decoration-color
• transform
• transform-origin

手元のFirefoxではたしかにbox-shadowがアニメーションしましたが、Google Chromeでは対応していないようです。

まあ確かに色や数値を取るプロパティなので、対応してくれても良さそうなものではあります。

もうちょいと詳しくしたものと、他の指定

前述した通り、durationには他にも指定があります。

以下の四種の指定を任意の順序で、空白文字区切りで記述する事ができます。

• 対象プロパティ名
• 所要時間
• 遷移方法
• 開始遅延

また上記の塊を、カンマ,で区切って複数記述する事もできます。

遷移方法

数値の変わり方

以下のいずれかを指定できます。

• ease （初期値）
• linear
• ease-in
• ease-out
• ease-in-out
• step-start
• step-end

他に、細かく数値を指定する関数もあります。

開始遅延

変化の開始を遅らせる事ができます。所要時間と同じく時間を指定します。

ばらばらに指定

durationプロパティは短縮表記用のものなので、個別に指定するプロパティもあります。

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

こちらもそれぞれカンマ,で区切って複数を指定する事が出来ます。あるn番目の指定は、他のn番目の指定に対応します。

おしまい

見た目を変えない価値がある。変えるものは、transitionで。

なんのこっちゃ。

参考

• CSS Transitions … 仕様。そんなに長くない
• CSS transitions – CSS | MDN … Mozillaの。日本語

追記

2012-12-23

遷移方法とかについて追加。