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なんかは対象外で、瞬時に変わります。(モーフィングみたいにはなりません。)

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

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

プロパティ名 値の種類
background-color 色
background-position パーセント, 長さ
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 長さ, パーセント
clip 矩形
color 色
crop 矩形
font-size 長さ, パーセント
font-weight font weight
height 長さ, パーセント
left 長さ, パーセント
letter-spacing 長さ
line-height 実数, 長さ, パーセント
margin-bottom 長さ
margin-left 長さ
margin-right 長さ
margin-top 長さ
max-height 長さ, パーセント
max-width 長さ, パーセント
min-height 長さ, パーセント
min-width 長さ, パーセント
opacity 実数
outline-color 色
outline-offset 整数
outline-width 長さ
padding-bottom 長さ
padding-left 長さ
padding-right 長さ
padding-top 長さ
right 長さ, パーセント
text-indent 長さ, パーセント
text-shadow shadow
top 長さ, パーセント
vertical-align 長さ, パーセント
visibility visibility
width 長さ, パーセント
word-spacing 長さ, パーセント
z-index 整数

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で。

なんのこっちゃ。

参考

追記

2012-12-23
遷移方法とかについて追加。