前回の記事で解説しているお絵描きアプリケーション「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)のcanva
![CSS3だけでアニメーションを作成する](https://cdn-ak-scissors.b.st-hatena.com/image/square/bed39b5962a5d552c95b6d796db8f55e72d32943/height=288;version=1;width=512/https%3A%2F%2Fxtech.nikkei.com%2Fimages%2Fn%2Fxtech%2F2020%2Fogp_nikkeixtech_hexagon.jpg%3F20220512)