freeCSS3のtransitionプロパティを使うと、ふたつの画像をクロスフェードで切替えることができます。Transition)」は、さらに切替えボタンなどのインターフェイスもCSSでつくっていました。そこで、このコードの行数をわかりやすいように減らし、手直ししたサンプルで仕組みをご説明します(サンプル001)。JavaScriptコードは書きません。画面の基本デザインアニメーションやインタラクションは後回しにして、まずは画面とインターフェイスの土台となるデザインから始めます。body要素には、つぎのようにid属性("gallery")が与えられたdiv要素を加え、その中に切替えボタンのインターフェイスをリスト(ul要素とli要素)で定めます。切替える画像(img要素)は後でdiv要素に含めます。ボタンにするli要素の中のa要素には、href属性が仮で与えてあります。href="#"></a></li></ul></div>このbody要素に後に掲げるコード001のCSSを適用すると、画像の領域とボタンのインターフェイスが表示されます(図001)[*1]。ボタンをかたちづくったCSSの定めについて、少し補っておきましょう。図001■画像の領域とインターフェイスのボタンがCSSで定められたボタンにしたli要素の中のa要素は、以下の抜書きのようにdisplayプロパティにblockを与えてブロック要素ボックスとしました(第28行目)。コードの頭に添えた行数は後掲コード001にもとづきます。border-radiusプロパティで円形に見えるように角を丸めました(第31行目)。ボタンをへこんだように見せるために用いたのが、box-shadowプロパティです。第1に、左上の影を内側に落とします。第2に、右下の影は白いハイライトにして外側に加えるのです(図002)。内側につけたい影は、insetキーワードで始めます。影はカンマ区切りでいくつでも定められます(第30行目)。50%;}style要素の定めをまとめたのが、以下のコード001です。これで、前掲図001のように、画像の領域とインターフェイスのボタンが表示されます。ここまでは、アニメーションもインタラクションも加えていません。CSS3の機能は、ブラウザとそのバージョンによってベンダー接頭辞を加えなければなりません。WebKit系なら-webkit-、Mozilla系は-moz-などです。free」を用いることにより、ベンダー接頭辞は省きました(図003)。ボタンのアニメーションとインタラクションつぎに、ボタンのインタラクティブな動きをCSSで定めます。このとき、ターゲット要素を使いますので、src属性のない仮のimg要素にid属性を与えて、div要素につぎのように加えます。ボタンのa要素にも、それぞれ対応したターゲットをhref属性に定めました。href="#no_05"></a></li></ul></div>手を加えたCSSは、後にコード002としてまとめました。ボタンにマウスポインタが重なったときの設定は、お約束どおり:hover疑似クラスに定めます(第33〜35行目)。backgroundプロパティで色を変えました。darkgray;}ボタンをクリックすると、そのa要素のhref属性に定めたターゲットに移動します。URL(URI)にはそのターゲットが識別子として加わります。このとき、識別子の示す要素は、:target擬似クラスで表せるのです。つぎのようにidごとに:target擬似クラスを定めたので、そのidと同じhref属性のa要素が選ばれて、backgroundプロパティで色が変わります(第36〜42行目)。gray;}これで、ボタンへのマウスポインタの重なりと、クリックによる選択の動きができました(図004)。style要素をまとめたのが、以下のコード002です。後は、画像を加えて、クロスフェードのアニメーションを定めればよいでしょう。transitionプロパティでふたつのイメージをクロスフェードするでは、img要素に画像のsrc属性をつぎのように加えます。ボタンのリストについては、前掲のコードのまま変えていません。href="#no_05"></a></li></ul></div>イメージのフェードインやフェードアウトは、transitionプロパティのアニメーションでopacityプロパティの値を変えます。タイミング関数は値の変わり方を決め、キーワードから選べます(図005)。step-startstep-end新たなstyle要素の定めは、後にコード003としてまとめました。img要素に関わるコードを以下に抜書きしました。opacityプロパティの値は0が基本となり、transitionプロパティを定めました(第18〜19行目)。ボタンがクリックされてターゲットが選ばれると、そのimg要素はopacityプロパティの値1にフェードインします(第21および第23行目)。初めに表示しておくimg要素は、opacityプロパティに1を与えてあります(第22〜24行目)。他方、ターゲット以外のimg要素は、:not()疑似クラスでopacityプロパティの値が0にフェードアウトされます(第25〜27行目)。透明の要素はそのまま変わりませんので、前に選ばれていたimg要素と新たに選ばれたimg要素とがクロスフェードすることになります。0;}ここまで手を加えたstyle要素は、つぎにまとめたコード003のとおりです。ボタンのインターフェイスで選んだイメージが、クロスフェードのアニメーションで切替わります。お題は、基本的にはこれででき上がりです。影を加えるお題の前掲サンプル001には、画像を表示する領域にもうひと手間デザインの手が加えられています。それを補って、この解説を閉じましょう。加えたのはふたつの影です(図006)。:beforeと:afterで定めました。要素を傾斜してz-indexプロパティにより画像領域の背面に送ることで、傾いた影だけが下側の両端に表れます。画像を重ねれば、下の両角が少し浮き上がって見えることでしょう。図006■画像領域の下に加えたふたつの影の疑似要素transformプロパティを用いると、要素の伸縮や回転、移動、あるいは傾斜などの変形ができます。プロパティには、つぎのように変換関数を与えて座標変換します(表001)。回転はrotate()、x軸やy軸に対する傾斜は、それぞれskewX()とskewY()を用います。transitionを使った回転と伸縮のアニメーション」をご覧ください。時計回りに引数の角度回す。引数の比率だけ水平および垂直に伸縮する。引数がひとつのときは、水平と垂直は同じ比率とされる。引数の値だけ水平および垂直に移動する。引数がひとつのときは、垂直の移動値は0とされる。x軸もしくはy軸に対して引数の角度傾斜させる。ふたつの影の要素を加えて仕上げたstyle要素は、後にコード004にまとめて掲げました。疑似要素:beforeと:afterを定めているのがつぎの抜書きです。ふたつの疑似要素にtransformプロパティを使って、左右対称になるように傾けています(第26および第30行目)。skewY(4deg);}つぎのコード004が、前掲サンプル001に定めたCSSです。影を活かしてつくったインターフェイスで、画像がクロスフェードして切替わります。x軸とy軸に対する傾斜をふたつの引数として渡せるskew()関数が、かつての草案に含まれていて、実装されている環境もあります。現在は除かれているため、使うことは避けるのがよいでしょう。