Example 1 – CSSアニメーション

Example 1では、「夜空の星」で使っているCSS3アニメーションを解説します。

レイヤー構造

この章では、CSS3アニメーションに必要なレイヤー構造を解説します。レイヤーと言っても、Adobe Photoshopなどの画像処理ソフトで使うレイヤーと同じ考え方ですから、さほど難しくはありません。CSS3アニメーションでは、1個のレイヤー上に置かれた画像オブジェクトに対して、位置、大きさ、透明度を変化させます。オブジェクトを別々に変化させるには、異なったレイヤー上にオブジェクトを配置しなければなりません。

CSS3アニメーション

この章では、CSS3アニメーションのうち、移動、拡大・縮小、透明化を解説します。ツールとして、jQueryとjQueryUIを利用します。HTML5(およびCSS3)は、ブラウザの性能を高度に利用するため、ブラウザ依存性が残っています。そこで、JavaScriptライブラリのデファクトスタンダードであるjQueryが、多くのサイトで利用されています。