Safari3.1はCSSアニメーション付き。

Windows版Safari3.1がリリースされました。

Firefox 2の最大3倍、Internet Explorer 7の最大2倍、Opera 9の最大5.5倍のスピードでページを読み込めます。
また、JavaScriptの実行速度はFirefox 2の最大4.5倍、Internet Explorer 7の最大7倍、Opera 9の最大5倍です。

というわけで、確かに体感できるほど速いです。
特にキャッシュの読み込みが速いのか、一度開いたページの再表示がものすごく速くて、ほぼ一瞬で出てきます。
また、ちょっと重めのJSを使っているページを見ると明らかにFxなどより速いです。5倍とかはわからないですが…。

このSafari3.1、速いだけじゃなく、しっかりHTML5の一部機能とCSSアニメーション(CSS transforms and transition)などを実装しています。

HTML5の「video」「audio」などは実装方法をまだ調べてないので、とりあえずCSS transforms and transitionのほうだけちょっと見てみましょう。

以下はSafari3.1で見てください。

Safariで見るとアンチエイリアスが効くので、下記のようなボックスだとイラストレーターのシェイプみたいに見えますね(笑)
きれいな描画に感動。

safari3.1 CSSアニメーション
※↑これはキャプチャ画像。Safariで見るとこんな感じ。

それぞれのボックスにオンマウスするとアニメーションします。
これらの動きはCSSのみの指定で、Javascriptは使用していません。

スライド

斜め右下に動きます。

角丸回転

3回転くるくるっと。

拡大

2倍に拡大します。

上記スタイルのコードは以下。

HTML
  1. <p class="box slide">スライド</p>
  2. <p class="box rotate">角丸回転</p>
  3. <p class="box scale">拡大</p>
CSS
  1. .box {
  2. margin: 2em 1em;
  3. width: 100px;
  4. height: 60px;
  5. border: 2px solid #726c6a;
  6. background-color: white;
  7. line-height: 60px;
  8. text-align: center;
  9. -webkit-transition: all 1s ease-in-out;
  10. }
  11. .slide:hover { -webkit-transform: translate(3em,3em); }
  12. .rotate {
  13. border-color: red;
  14. -webkit-border-radius: 1em; }
  15. .rotate:hover { -webkit-transform: rotate(1080deg); }
  16. .scale:hover { -webkit-transform: scale(2); }

こんな簡単な指定でこんなアニメーションが指定できちゃう!
もう面倒なJSを使ったアニメーションとか不要になりますねぇ。これはいい。
角丸ももっと粗いかと思っていたけど、画像を使うまでもないきれいさです。Safari最高。 早く各ブラウザ標準装備になってほしいですね。

ちなみに、Win版Safari3のCSSハックはコリスさんで検証されています。
Win版Safari3だけのハックはbody:first-of-typeが唯一有効なようですね。(最新版3.1で再現しました)

  • コメント(2)
  • トラックバック(0)
  • Mixi Check
  • はてなブックマーク数 はてなブックマークコメント

Track back

このエントリーのトラックバックURL

Comments

1:mikzo 2008年03月21日 20:42

おーすげーなんだこれw
おもしれーー。いつ他のブラウザに搭載されるんだぃ?w

2: 2008年03月22日 05:39

さぁー・・・いつなんだろうね?
Fxなんかは既に4まで開発着手されているらしいから、数年以内には標準になってくるだろうねぇ。

Your Comment





Tag Cloud

About

drop

Author:飴(drop)

web技術に関するtipsや主にweb関連のニュースなどをメモ的に記していきます。

このサイトについて

RSS購読