以前指摘したように、トランジションの仕様は固まっておらず、シンタックスと動作は変わる可能性がある。それでも、CSS3 のトランジションを使えば、CSS のプロパティと HTML のエレメントをアニメーション化できる。その応用例としては、アニメーション化したロールーオーバー、フェード、白から黒への色の変化などが挙げられる。

トランジションの簡単な使用例は、「Understanding CSS3 Transitions」というサイトにある。ここには、CSS3 トランジションのサンプルがいくつか用意されている。

W3C の CSS トランジション ページには、アニメーション化できる全プロパティの一覧がある。トランジション用コードは手作業でも作れるが、それだと時間がかかりすぎる。CSS3 トランジションの使用手順を簡単にするため、ここでは Adobe Dreamweaver CS6 を使用し、CSS Transitions Panel でトランジションの仕組みの基本的な流れを見ていく。

まず、Dreamweaver CS6 を起動し、「ファイル(File)」メニューの「新規ファイル(New)」をクリックする。

次に、「別名で保存(SAVE As)」をクリックする。Dreamweaver のアセット ファイルをインストールしてある場合は、そこを参照し、「Transitions」という名前でファイルを保存する。

ここからトランジションを構築していく。「Design」ビューで「Link One」をクリックする。次に「Window: CSS Transitions」に移動してパネルを開く。このときは中に何も入っておらず、パネルが空であることに注意したい。

Transitions パネルの左上にあるプラス記号(+)をクリックする。これで New Transition ダイアログ ボックスが開く。ここには、手動で入力していくドロップダウン リストとパラメータ ボックスが複数ある。とりあえず、以下を入力する。

・Target Rule:.morph (注:このルールは、ドロップダウン リスト中のオプションには表示されない)
・Transition On:Hover
・Use the Same Transition for All Properties
・Duration:2秒
・Delay:.025秒
・Timing Function:Ease-in
・Property:プラス記号(+)をクリックしてバックグラウンド カラーを選択
・End Value:#0FF
・Choose Where to Create the Transition:This Document Only
・Create Transition をクリック

ここで Code ビューで結果を見ると、.morph という新しいクラスが作成されている。CSS トランジション作成前に Link One をクリックしているため、選択されたエレメントにもこのクラスが追加されていることに注意したい。

このトランジションが動くようすを見るには、「Live View」をクリックする。Design ビューの Link One にマウスを置いたときと、マウスポインタをそこから離したときの動きに注意したい。

トランジションを編集して新しい設定を試したい場合はどしたらよいか。まず、Live ビュー ボタンをクリックして無効化する。次に、CSS Transitions パネルに戻る。a.morph をハイライトさせ、上にある鉛筆アイコンをクリックする。これで Edit Transition ダイアログ ボックスが開く。ここで必要な調整を行い、それが終わったら Save Transition ボタンをクリックする。

これで CSS3 トランジションで行える処理の概要が理解できただろう。詳しい情報は、本稿の最後にある参考資料を参照されたい。

CSS3 グラデーション


次に CSS3グラデーションを見ていく。この話題について学習できる「Mozilla Developer Network: Using CSS Gradients」では、直線グラデーションと円形グラデーションの2種類が解説されており、グラデーションの使用例も多数ある。

グラデーション処理用として、無償ツール「Ultimate CSS Gradient Generator」が存在する。

ただし、Firefox と Chrome でしか使えないことに注意したい。また、IE では問題があって未サポートだとの話もある。

Dreamweaver CS5.5 は CSS3 のグラデーションをサポートしている。そこで、Dreamweaver 5.5 で提供されているファイルの透過機能を見ていく。このレイアウトでは、すべての列に不透明な白いヘッダが付いている。グラデーションを変更するには、CSS Styles パネルを利用する必要がある。

そのためには、「Window: CSS Styles」を使う。パネルを開いたら、リストを下へスクロールしていき .eqHeight を見つける。透明にしたい白いカラー サンプルがあるものの、現在はコードが #FFFFFF になっていることに注意したい。これでは透明にできないので、変えなければならない。

変更するには複数の段階を踏む。まず、白のカラーサンプルをクリックする。するとカラーパレットが表示されるので、右上の三角をクリックしてポップアップ メニューを出す。の方へスクロールして「Color Format」をクリックし、ポップアップ表示される次のメニューで rgba() をクリックする。「a」は「アルファ」もしくは透明を意味する。

次にカラーピッカが表示されるので、それをカラーサンプルの上で移動させると、カラー表示が変化するだろう。白がよければ白のカラーサンプルをクリックして選択する。すると、このプロパティで背景色が「rgba(255,255,255,1)」と表示される。最初の3桁の数字は白を示し、最後の数値はアルファで画像の透過率をコントロールする。

透過率を変更するために、数字の5を入力する。ここで白の列が急に透明化したことに注意したい。

次に、オレンジの「wine tasting」ボタンをいろいろ操作する。まずは、Live View をオフにする必要がある。その後で関連する CSS ルールを探す。今回の場合、CSS Styles パネルにある .reminder がそれに該当する。

選択された .reminder とそれに付随するすべてのプロパティは、かなり大量だ。ここでは「wine tasting」ボタンの透過率と色を変更したい。

このプロパティ一覧では、.background プロパティで透過率が決まる。さらにいろいろコントロールしたいので、右クリックして code ビューを開く。

CSS では、.background: -webkit-gradient をほかのものと分けている(配下のコードを見ると、グラデーションを決める2つのカラー設定グループが見つかるだろう。簡単な変更にするため、最初のグループを「00FF33.」に変更して Live View を有効にする)。

ここで円がどうなるか注意していただきたい。これで、Dreamweaver でグラデーションを使って何ができるかが簡単に分かるだろう。想像されるとおり、さらに多くの操作が可能であり、それについては次回以降で解説していく。

参考資料


・Understanding CSS3 Transitions
・CSS3 Transitions
・The Expressive Web
Creating CSS3 Transitions in Dreamweaver CS6