前回の記事で解説しているお絵描きアプリケーション「My Animals Note！」のオープニングと、「保存データ」画面で線画が飛び回るアニメーションは、CSS3で作成しています。ここでは簡単なサンプルを使って仕組みを解説しますので、興味を持った方は、日経ソフトウエアのWebサイト（http://software.nikkeibp.co.jp/）からソースコードをダウンロードして、CSSの記述をチェックしてください。
リストAのHTMLドキュメントをWebブラウザ（SafariかGoogle Chrome）で開くと、赤い正方形が画面左上に現れて、右下に向かって回転しながら移動します（図A）。右下で静止した後、鉛直方向を軸として1回転した後、左上にすっと戻って行きます。これを2回繰り返します。
コードの説明をしましょう。(1)のCSSは、canvas1というidを持つ要素（(2)のcanvas要素）に対するアニメーションを設定しています。上の行から順に、動き方、アニメーションを行う時間、繰り返しの回数、イージング（動き始めと動き終わりの加速・減速の度合い）を指定します。
動き方を指定する属性「-webkit-animation-name」では「imove1」と指定していますね。これは、動き方を定義するキーフレームとしてimove1を利用することを表しています。キーフレームとは時間の経過に伴って、アニメーションの対象となる要素が、どのように変化するかを定義するものです。なお、属性名の冒頭にある「-webkit-」は、ベンダープリフィックス＊Aです
キーフレームimove1の具体的な内容を定義しているのが、@-webkit-keyframes imove1から始まる(3)のブロックです。0%、50%、…とあるのは経過時間です。アニメーションを行う時間のうち、どの時点でどこまで変化しているかを表します。例えば、0%では、translate（移動）が(0px, 0px)、rotateY（鉛直方向を軸とする回転）とrotate（回転）の値を0degにしています。次の50%では、translateが(600px, 400px)で、rotateが360degとなっています。
これは、アニメーションを行う全体の時間の半分の時点で、Webブラウザ上の座標で(0px, 0px)から(600px, 400px)まで移動し、かつ360度回転していることを指定しています。その間の動きは、なめらかになるようにWebブラウザが自動的に補間します。
(4)は、(3)のcanvas要素に赤い正方形を描画する関数です。内容は前回のリスト1と同じですので、説明を省略します。この関数は(5)のonloadイベントハンドラにより、ドキュメントがロードされたタイミングで実行されます。
GENOVA（http://www.genova.co.jp/）所属。デジタルハリウッドでPHP講座の講師を務めるほか、フリーソフト「AIR Note！」の開発、WEB業界誌での執筆や各PC関連誌などで紹介されるなど、多方面で活動中。最近はRIA開発に注力しており、HTML5/CSS3の潜在能力の高さに驚かされています。既にiPad/iPhoneではHTML5で構築したサイトが増加しています。皆さんもぜひチャレンジして下さい。
