モダンなアプリ体験を提供するためには、アニメーションや軽量グラフィックスの使用は不可欠です。以下のページはこの分野で必要な情報を提供します。
- CSS トランスフォーム
- CSS トランスフォームを使えば、可能な場合はハードウェアアクセラレーションを活用しつつ、JavaScript コードに一切頼らずに HTML コンテンツを回転、拡大、縮小させることができます。
- CSS トランジション
- CSS トランジションを使えば、CSS への変更に動作を加えることができます。トランジション効果が設定されると、CSS への変更は即座ではなく一定の時間を掛けて行われるようになります。これにより、アプリに様々な視覚効果を簡単かつ効率的に追加することが可能となります。
- CSS アニメーション
- CSS アニメーションを使えば、キーフレームを用いてアニメーション効果を正確に設定することが可能となり、より基本的なレベルでドキュメントへの変更に動作を加えることができます。また、トランジションのように 1 回だけ発生する効果に限らず、JavaScript に一切頼らずに、ループするアニメーション効果を生み出すことも可能です。
- HTML Canvas
-
HTML
<canvas>要素は、描き込み可能な 2 次元グラフィックスワークスペースを提供してくれます。これには 2D ゲームなど様々な使い道があります。 - WebGL
- WebGL は OpenGL ES を Web 向けに最適化したもので、ハードウェアアクセラレーションを活用した 3D グラフィックスをアプリに組み込むことが可能です。
- SVG
- Scalable Vector Graphics (SVG) はビットマップ画像の代わりにベクター画像を用いてグラフィックスを描画できる技術です。これは拡張性に優れ、図表やグラフなどを作成するのに便利なだけでなく、高品質で拡大縮小可能なユーザインタフェースにも最適です。