2008/11/19

CSSにアニメーション機能を


Syntax Error - Folded Up Beyond All Recognition on Flickr - Photo Sharing!

そういえば、このBlogの前のデザインの時に使っていましたね。
webkit-transform を使ってみた | itFun.jp

 

Appleは先日、CSS TransitionsとCSS Animationの2種類の仕様について提案。

CSS Transitionsは比較的単純なアニメーションが可能です。
拡大、縮小、回転など。変化にかかる時間を指定することが出来るので、アニメーションが発生します。

ただ、これは比較的簡単にCSSに書き込むだけで実現できますが、その代わりに読み込まれた順に開始されてそれらが終了したらそこでお終い。という高度なアニメーション効果を実現するには役不足です。

CSS AnimationはTransitionsを拡張する機能を定義しており、@keyframesという指定を行うことで、javascript側からCSS Transitionsを呼び出すことを可能にしています。

 

想定としてはデザイナーがCSS Transitionsを用いて、動きのある部分はAjax libraryでCSS Animationを使うという感じでしょうか。

 

ただ、Flashを用いないというのは良いですね。
Flashの利用を見ていると、ちょっとしたアニメーションのために使っているのが結構な割合を占めているのではないでしょうか。
それが、CSS Transitionsに変わればWebのローディング短縮にもなりますし、Flashの上からだと分かりにくいリンク先の表示や、なによりもマウスジェスチャーが使えるというのが:p

逆にFlashという共通な環境を用いないので、それぞれが別のエンジンでCSS Transitions等を実装した場合さらにデザイナー/デベロッパーの負荷が大きくなってしまうような気がします。
さらに、きちんと実装されていない(IEとかIEとかIEとか)ブラウザーに対しての動作確認も怠るわけにはいきません。

モバイル環境においても同じと思います。
第一ユーザーがWebその物がアニメーションする事に馴れていないんじゃ…

 

冗談でも良いから、WebKitを採用するって言ってよスティーブ!
なぜMicrosoftはIEにこだわるのか? | itFun.jp

 

via CSS TransitionsとCSS Animations、Apple提案のCSSアニメ機能| マイコミジャーナル