Expression Web 4でCSS3ナビゲーション：続編
はじめに
前回の記事では、CSS3のtransformプロパティを使ってサイトのナビゲーションに視覚効果をつける方法について模索しました。transformプロパティについてですが、そのベース位置から要素が変換された状態へ何かしら突然視覚的な変化をもたらせます。ときどき、あなたはむしろより段階的な変化を好むもしれませんね。
驚いたことに、CSS3は以下を可能にするツールを提供します。サイズや色といった簡単な切り替え効果、状態を変化させる前にどれぐらいの時間を待機させるかといった時間の量や一つの状態から他へ変化させる要素をコントロールするtransitionプロパティ、そして直線方向に変化させるのかカーブに沿うべきなのかといったことです（詳細は後述します）。
同じナビゲーションリストを作成する
以下のように同じナビゲーションリストを開始しましょう。
<div id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">On</a></li> <li><a href="#">The</a></li> <li><a href="#">Range</a></li> </ul> </div>
そして、ナビゲーションに視覚的変化を与えるためのa:hoverの疑似クラスを含めた、同じ基本スタイルを作成します。
#menu li {
width: 80px;
color: #EE0;
list-style: none;
background-color: #039;
padding: 5px 10px;
border-color: #DEF;
}
#menu li:hover {
background-color: #F80;
border-color: #FF0;
}
結果、前の記事でみたような感じになります。
もし :hover スタイルにtransitionプロパティを追加する場合、基本位置からのtransitionが段階的になります。
#menu li:hover {
background-color: #F80;
border-color: #FF0;
-ms-transition: background-color 250ms, border-color 500ms;
-moz-transition: background-color 250ms, border-color 500ms;
-webkit-transition: background-color 250ms, border-color 500ms;
-o-transition: background-color 250ms, border-color 500ms;
}
メモ：transitionは1 つ以上のプロパティに適用することと、期間を個別に各影響を受けるプロパティを設定できます。
transition プロパティは、色、罫線、余白、パディング、およびサイズの変更などの比較的単純な効果は制限されます。より複雑なtransitionのためには、トランスフォームのように、位置変更パラメータとtransitionプロパティと同様にコントロールできるアニメーションプロパティ、および、複数のキーフレーム、前後アニメーション、無限に繰り返すアニメーション（通常あまりいいアイデアはではないけれども）または何回アニメーションを繰り返して再生するかを定義することができます。
アニメーションは、アニメーションの特定のポイントで外観を定義するキーフレームを定義することによって動作します。単純なアニメーションはたとえば開始から終了までの2つのキーフレームとなるでしょう。
メモ：この記事の執筆時では、Internet Explorer 9とOpera 11.5のいずれかがキーフレームアニメーションサポートを提供します。
ここにシンプルなアニメーションの例を挙げます
#test li:hover {
-webkit-animation: selected alternate infinite 1s;
-moz-animation: selected alternate infinite 1s;
}
@-webkit-keyframes selected {
from {
border-color: #DEF;
background-color: #039;
}
to {
border-color: #FF0;
background-color: #F80;
-webkit-transform: translate(30px) scale(1.5) rotate(-15deg) skew(-5deg);
}
}
@-moz-keyframes selected {
from {
border-color: #DEF;
background-color: #039;
}
to {
border-color: #FF0;
background-color: #F80;
-moz-transform: translate(30px) scale(1.5) rotate(-15deg) skew(-5deg);
}
}
複雑なアニメーションでは、次のように中間のキーフレームを作成できます。
@-webkit-keyframes selected {
from {
border-color: #DEF;
background-color: #039;
}
33% {
border-color: #FF0;
background-color: #F80;
-webkit-transform: translate(30px) scale(1.5) rotate(-15deg) skew(-5deg);
}
67% {
border-color: #FF0;
background-color: #F80;
-webkit-transform: translate(30px) scale(.75) rotate(15deg) skew(10deg);
}
to {
border-color: #FF0;
background-color: #F80;
-webkit-transform: translate(0) scale(1) rotate(0) skew(0);
}
}
@-moz-keyframes selected {
from {
border-color: #DEF;
background-color: #039;
}
33% {
border-color: #FF0;
background-color: #F80;
-moz-transform: translate(30px) scale(1.5) rotate(-15deg) skew(-5deg);
}
67% {
border-color: #FF0;
background-color: #F80;
-moz-transform: translate(30px) scale(.75) rotate(15deg) skew(10deg);
}
to {
border-color: #FF0;
background-color: #F80;
-moz-transform: translate(30px) scale(1.5) rotate(-15deg) skew(-5deg);
}
}
アニメーション化すると、このようなものになります。
さいごに
その例から、そのアニメーションプロパティは transformのように 詳細にCSS3 プロパティをアニメーション化するようにアニメーションの中間の状態の制御を提供することに疑いを持たないでしょう。欠点は、まだ多くのブラウザーで実装されていないということです。
次の記事では、いくつかの新しいCSS3のセレクターについてみていく予定です。
記事元：Expression IQ：More CSS3 Navigation in Expression Web 4
Expression Web 最新記事
- Expression Web 4でCSS 3カスタムセレクター
- Expression Web 4でCSS3ナビゲーション：続編
- Expression Web 4 SP1でCSS3ナビゲーションをデザインする
- Expression WebでCSS3への導入
- Expression Webでページ挿入機能を使ってみよう
