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

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

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

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

※↑これはキャプチャ画像。Safariで見るとこんな感じ。

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

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

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で再現しました）

参照リンク

• The Art of Web ~ CSS: Animation Using CSS Transforms
• HTML5も先取り、Safari最新版がリリース － ＠IT
• CSS Hack for Safari | コリス