・ユーザーインターフェイスをアニメーションさせる
FirefoxやIEといったWebブラウザでアニメーションするドロップダウンツールバーやメニューなどを表示させるには、JavaScriptを駆使する必要がある。いっぽう、Safariでは指定した要素をアニメーションさせながら変形させる「transition」機能を独自実装している。transition機能は、CSSで「-webkit-transition-」で始まるプロパティを指定することで利用できる。この機能を利用すれば、複雑なJavaScriptコードを用意しなくても、簡単にアニメーションする要素を作成できる。
たとえば、次の例（図5）はTransition機能を使ってアニメーションを実装した例だ（サンプルページ）。グレーの矩形領域にマウスポインタを重ねると、Firefoxなどでは一瞬で矩形の色と大きさが変化するが、Safariでは0.5秒間でゆっくりとアニメーションしながら色と大きさが変化する。
|
→ |
|
→ |
|
| 図5 Transitionを使うと、アニメーションしながら形や色が変化する要素を簡単に作成できる | ||||
このアニメーションは、下記のような単純なCSSだけで実現できる。この例では、:hover疑似クラスを用いて要素を変形させているが、この「アニメーションしながらの変形」はJavaScriptでエレメントのプロパティを変更した際にも反映される。たとえば、JavaScriptで要素のheight値を変更するようなコードを記述するだけで、要素の高さが変形するアニメーション表示を実現できる。
<style type="text/css" media="screen">
div.transition {
-webkit-transition-property: all;
-webkit-transition-duration: 0.5s;
width:100px;
height:100px;
background-color:#999;
overflow: hidden;
border: 1px solid;
}
div:hover.transition {
-webkit-transition-property: all;
-webkit-transition-duration: 0.5s;
width:100px;
height:200px;
background-color:#FFF;
overflow: hidden;
border: 1px solid;
}
</style>
<div class="transition" >
This is transition sample.</div>
iPhone向けWebサイトの実装例
以上のようなiPhone向けのデザイン/動作を実装したサンプルページ（iPhone向け）を用意したので、興味のある方は各自動作やコードを確認していただきたい。このサンプルページはiPhone版Safariでアクセスした場合のみiPhone向けの表示を行うが、ほかのWebブラウザでアクセスした際もiPhone版Safariでアクセスした場合と同様に表示するサンプルも用意した。なお、このサンプルではSafariでしか利用できない「transition」機能を利用しているので、Safari以外では一部のアニメーションが表示できない点に注意して欲しい。