Home > Latest topics

Latest topics > CSS Transitions(CSSだけで簡単なアニメーション)の使い方・覚え方のまとめ

宣伝1。日経LinuxにてLinuxの基礎?を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能! シス管系女子って何!? - 「シス管系女子」特設サイト

宣伝2。Firefox Hacks Rebooted発売中。本書の1/3を使って、再起動不要なアドオンの作り方のテクニックや非同期処理の効率のいい書き方などを解説しています。既刊のFirefox 3 Hacks拡張機能開発チュートリアルと併せてどうぞ。

Firefox Hacks Rebooted ―Mozillaテクノロジ徹底活用テクニック
浅井 智也 池田 譲治 小山田 昌史 五味渕 大賀 下田 洋志 寺田 真 松澤 太郎
オライリージャパン

CSS Transitions(CSSだけで簡単なアニメーション)の使い方・覚え方のまとめ - May 02, 2010

いろんな人がいろんな解説を既に書いてるみたいだけど、ツリー型タブでタブのインデントや折り畳みのアニメーションをCSS Transitionsで書き直してみるにあたり、自分で書いてみるまでよく分からんかったので、理解している内容をまとめてみることにした。

CSS Transitionsのフルスペックの説明でもないし、「こんなことができるぜすげーだろ!」というデモでもない。現実的にどういう場面でどういう風に使う事ができるのか、という事を淡々と述べます。いろんな機能を詰め込んだよく分からんデモスクリプトと組み合わせること前提の変なデモを見たせいで混乱してる僕みたいな人が、CSS Transitionsを理解するための手助けになれれば幸いです。

主な用途

マージンや色などの値を数値で表せるプロパティや、画像を表示する系のプロパティなどについて、スクリプトあるいは:hoverなどの疑似クラスによって動的に値が変化するようにしている場面で、元の状態と新しい状態の間をなめらかに変化させるようにする。

例えば、こんな風に。

ul.menu li {
  transition: margin-left 0.25s ease-out;
}
ul.menu li:not(:hover) {
  margin-left: 0;
}
ul.menu li:hover {
  margin-left: 50px;
}

この例では、分かりやすくするために敢えて指定を分けて書いている。ここでは以下のようなことが起こっている。

  • 何もしていない状態だと、margin-left: 0;が適用されている。
  • :hoverの状態になると、margin-left50pxになるようにアニメーションが始まる。
  • :hoverの状態が解除されると、margin-left0になるようにアニメーションが始まる。

何ができる?

  • CSSだけでやれる範囲でいうと、上記のサンプルのように「:hoverになった時にぽわーんとなめらかに出てきて、:hoverが解除されたらぽわーんとなめらかに引っ込む」ようなGUI要素をスクリプト無しで書けるようになる、という所に意義がある。例を挙げると、以下のような物が該当するだろう。
    • :hoverの時だけ出っ張るメニュー項目が、なめらかに出っ張る/引っ込むようになる、とか。
    • :hoverすると色が変わるボタンが、「じわっ……」と色が変わるようになる、とか。
    • :hoverで影が付く時に、「じわっ……」と影が濃くなる、とか。
    • メニューが透明な状態から「じわっ……」と表示されていく、とか。
    • アイコンが90°回転する時に回転がなめらかになる、とか。
  • スクリプトと組み合わせて使う場合、トゥイーンのための実装が要らなくなる(ネイティブ実装に任せてしまえる)というのが多分最大のメリット。
    • ポジショニングやマージンの調整で要素の表示位置を変える時、単に新しい値(=アニメーションの終了時点の値)を設定するだけでトゥイーンしてくれる。
    • CSSで初期値とdurationとイージング関数を指定しておいて、スクリプトで終了値だけを動的に指定する、という使い方。
    • CSSのクラスセレクタであらかじめいくつかの終了値のセットを定義しておいて、スクリプトでclassNameを書き換えて終了値を間接的に指定する、という使い方。
    • タイマーの管理が不要になるので、複数のアニメーションを同時に走らせる場合、アニメーションが全体的に軽くなると思われる。
  • 既に前のアニメーションが行われている間にまた値を変更した場合、現在の時点の値からの変化になる。
    • アニメーションの中断と再開のための面倒なコードは不要。
    • 例えば、margin-left0であったのを、20pxを設定してアニメーションが始まり、20pxに向けて変化していっている最中の10pxの時点でmargin-left0に再設定した場合、前のアニメーションが中断されて、新たに10pxから0に向けて変化するアニメーションが始まる事になる。
    • スクリプトでも動的疑似クラスでも。

「Windows Vista以降のAero Glass有効時のネイティブアプリのボタンみたいな物をWebに簡単に持ち込めるようにする」「GUIの端々にほんのちょっとだけ小粋なアニメーション効果を加えたい時に、スクリプトを書かなくてもよくなる」という話ですね。それ以上でもそれ以下でもないと思っておくと、CSS Transitionsを理解しやすいと思います。

何ができない?

  • テレビアニメのような、長くて複雑なアニメーションは無理。滅茶苦茶頑張ればできるかもしれないけど、CSS Transitionsの仕事ではない。
  • アニメーションと連動したスクリプトの複雑な制御。
    • アニメーション終了時にはDOM Level2 Eventsのイベントリスナで捕捉可能なtransitionendイベント(WebKitではwebKitTransitionEnd)が発行されるので、アニメーションの終了だけは検知できる。
    • それ以外のタイミングではイベントは発行されない(アニメーションが始まったかどうかも分からない)。
  • 無限に繰り返すアニメーション。
    • ループするアニメーションのデモではスクリプトと組み合わせていて、transitionendイベントを使ってその都度新しい「アニメーション終了時点の値」を設定し直してやることで、アニメーションを繰り返している。CSS Transitionsだけではループはできない。
  • どんなプロパティでもアニメーションできるわけではない。仕様書(のWorking Draft)にアニメーションできるプロパティの一覧がある。

書き方

transition:
    アニメーションさせたいプロパティの名前
    アニメーション終了までにかける時間(省略すると0)
    イージングの種類(省略するとease)
    アニメーションが始まるまでの遅延(省略すると0);

これで1セットと考えると分かりやすい。複数のプロパティをアニメーションさせたい時は、

transition: margin-left 1s ease;
transition: margin-top 1s ease;

とは書けないので、カンマ区切りにして

transition: margin-left 1s ease,
            margin-top 1s ease;

と書く。

アニメーション終了までにかける時間はCSS3 Values and Unitsの時間の値で指定する。例えば250ミリ秒で完了させたい時は250ms(ミリ秒単位)または0.25s(秒単位)と書く。アニメーションが始まるまでの遅延も同様。

イージング関数(値の変化の仕方)には、以下のいずれかを指定できる。

linear
等速直線運動的な変化
ease-in
最初はゆっくり、最後にいくにつれて激しく変化
ease-out
最初は激しく、最後にいくにつれてゆっくり変化
ease
ゆっくり始まって、途中で最高速になり、最後はまたゆっくり変化
ease-in-out
easeをもう少しきびきびさせたような感じ
cubic-bezier()
ベジェ曲線でアニメーションの変化の仕方を指定

現状ではまだ仕様が固まっていなくてどのベンダも先行実装の段階なので、ベンダープレフィクス付きの指定を書いてやらないといけない。

-webkit-transition: SafariとGoogle Chrome用の指定;
-moz-transition: Firefox用の指定;
-o-transition: Opera用の指定;
transition: 仕様通りの指定;

CSS TransitionsがRecommendationになったら、ベンダープレフィクス無しの記述だけでいけるようになるはず。

分類:Web技術 > CSS, , , , , 時刻:16:03 | Comments/Trackbacks (1) | Edit

Comments/Trackbacks

no title

参考になりました!
面白い機能が実装されましたね

早速使ってみました

Commented by CielNoir at 2011/06/25 (Sat) 23:51:00

TrackBack ping me at


の末尾に2014年1月19日時点の日本の首相のファミリーネーム(ローマ字で回答)を繋げて下さい。例えば「noda」なら、「2010-05-02_transition.trackbacknoda」です。これは機械的なトラックバックスパムを防止するための措置です。

Post a comment

writeback message: Ready to post a comment.

2014年1月19日時点の日本の首相のファミリーネーム(ひらがなで回答)

Powered by blosxom 2.0 + starter kit
Home

カテゴリ一覧

過去の記事

1999.2~2005.8

最近のつぶやき

オススメ

Mozilla Firefox ブラウザ無料ダウンロード