F-site

CSS3を使ったアニメーションとインタラクション [Edit]

CSS3を使うと、静的な表現だけでなく、アニメーションやインタラクションが加えられます。その作例を8つご紹介します。最後の例を除いて、JavaScriptコードは書きません。いずれも中身は、リンクしたノートで詳しく解説しています。

01 テキストのアニメーション

ただのテキストでも、フォントを選んでCSS3でアニメーションさせると、表現力は大きく高まります。

01-01 テキストをイルミネーションのように点滅させるアニメーション

「Monoton」フォントを使って、text-shadowプロパティで光彩を与えました。そして、animationプロパティにより、イルミネーションの点滅のようなアニメーションを加えています(サンプル001)。

サンプル001■CSS3: Flickering billboard light refined

01-02 テキストを順に浮かび上がらせては消すアニメーション

text-shadowプロパティのつくる影で、文字が浮き上がって見えるようにしました。animationプロパティが、テキストの影をひと文字ずつ時間差で増減して浮き沈みさせています(サンプル002)。

サンプル002■CSS3: Fading in and out characters in sequencial order

02 メニューのナビゲーション

マウス操作により、サブメニューを開くというインタラクションも、CSS3のアニメーションで表せます。

02-01 transitionを使ってメニューのナビゲーションをつくる

transitionプロパティでプルダウンメニューのナビゲーションをつくりました。サブメニューは不透明度を上げながら広がり、メニューテキストの色も短い時間で変わっています(サンプル003)。

サンプル003■CSS3: Menu navigation with transition

02-02 transitionを使ったアコーディオンメニュー

transitionプロパティでつくったアコーディオンメニューのナビゲーションです。サブメニューの高さと項目の不透明度をアニメーションさせることで開け閉めしています(サンプル004)。

サンプル004■CSS3: Accordian menu

03 イメージを扱ったナビゲーション

transformプロパティは要素を2次元あるいは3次元で、伸縮・回転・移動します。それにtransitionプロパティを組合わせると、インタラクティブなアニメーションができます。

03-01 transitionを使った回転と伸縮のアニメーション

transformプロパティでイメージを、伸縮したり、回転したり、移動できます。それにtransitionプロパティを組合わせてアニメーションさせました(サンプル005)。

サンプル005■CSS3: Rotating and scaling cards with transition

03-02 画像をクロスフェードで切替えるインターフェイス

transitionプロパティを使って、ふたつの画像をクロスフェードで切替えることができます。さらに、切替えボタンなどのインターフェイスもCSSでつくりました(サンプル006)。

サンプル006■CSS3: Crossfading images with the transition

03-03 画像とテキストを3次元でアニメーションさせる

transformとtransitionプロパティを組み合わせて、3次元のアニメーションができます。イメージやテキストの要素を水平に回したり、手前に押し出したりしてみました(サンプル007)。

サンプル007■CSS3: 3D animation with the transform and the transition properties

03-04 画像にロールオーバーしたときテキストを表示する

transformとtransitionプロパティを用いて、画像にマウスポインタが重なったとき説明のテキストを表示します(サンプル008)。表現の仕方を3つ試しました。

サンプル008■CSS3: Showing texts over images on rollover

04 CSS3の3次元表現にJavaScriptでインタラクションを加える

transformプロパティは、要素に回転・伸縮・傾斜・移動などの座標変換を加えます。さらに、transform-styleプロパティも合わせて用いれば、要素が3次元空間で変換できます。矢印キーの操作によるインタラクションは、JavaScriptコードで加えました(サンプル009)。

3次元空間に立方体をつくって回す ー transformプロパティ

サンプル009■CSS3: Rotating a cube with the transform property

• CSS3を使ったアニメーションとインタラクション