【CSS】Safari 3.1とCSS transforms and transitionで遊ぶ！

先日リリースされたSafari3.1は「CSS transforms and transition」を正式にサポートしています。
なんでもCSSでアニメーションを設定できちゃうとか。
ソレは面白い！てコトでさっそく試してみました。
（Safari 3.1で閲覧ください）

静的な表示を制御

まずは各要素のスタイルを静的に設定してみます。

共通の設定はこんな感じです。

<style type="text/css">
.box {
	width: 100px;
	height: 60px;
	margin: 0 auto 50px;
	background: #555;
	color: #FFF;
	text-align: center;
	border: 2px solid #999;
}
</style>

<div class="box" style="-webkit-transform: rotate(20deg);">回転</div>

<div class="box" style="-webkit-transform: scale(1.5);">拡大</div>

カンタン！
シンプルなコードで今までよりも自由に指定できます。

アニメーションを制御

次は動かしてみます。

擬似クラスに設定して、ロールオーバー時に動きをつけてみます。

<style type="text/css">
  .box {
    -webkit-transition: all 1s ease-in-out;
  }
  .slideleft:hover { -webkit-transform: translate(-200px,0); }
  .rotate:hover { -webkit-transform: rotate(360deg); }
  .scale:hover { -webkit-transform: scale(10); }
</style>

<div class="box slideleft">左にズレる</div>

<div class="box rotate">1回転</div>

<div class="box scale">10倍のサイズに</div>

面白い！
flashのようなトゥイーンの設定も自由にできます。

Safari3.1はこの他にも、音楽やビデオを直接埋め込むことができるvideoタグやaudioタグなんかも使えます。
もうFlash無しでリッチなコンテンツが作れちゃうかも？