サンプルコード

5 アニメーション

• 5-1 スタイル遷移のアニメーション - CSS Transitions
  • 5-1-1 CSS Transitionsの基本
  • 5-1-2 アニメーションイベント
• 5-2 キーフレームを使ったアニメーション - CSS Animations
  • 5-2-1 CSS Animationsの基本
  • 5-2-2 アニメーションイベント
  • 5-2-3 アニメーションの一時停止と再開
  • 5-2-4 キーフレーム操作
    • サンプル1
    • サンプル2
• 5-3 ベクターグラフィックスのアニメーション - SVG Animations
  • 5-3-1 SVG Animationsの基本
    • animate要素
    • animateMotion要素
  • 5-3-2 アニメーションの開始と終了の制御
  • 5-3-3 タイムラインの制御
  • 5-3-4 リアルタイムにアニメーションの状態を把握する
  • 5-3-5 アニメーションのイベント
  • 5-3-6 SVGとCSSとの組み合わせによるアニメーション
• 5-4 ディスプレーのリフレッシュレートに合わせたアニメーション - Timing control for script-based animations
  • setTimeout()
  • requestAnimationFrame()
• 5-5 アニメーションのタイムライン制御フレームワーク - Web Animations 1.0
  • 5-5-2 クイックスタート
  • 5-5-3 アニメーション効果
  • 5-5-4 アニメーションのオプション設定
  • 5-5-5 パスアニメーション
  • 5-5-6 再生状況の把握と再生の制御
  • 5-5-7 複数のアニメーションの同期再生
  • 5-5-8 複数のアニメーションの連続再生
  • 5-5-9 同時再生と連続再生の組み合わせ
  • 5-5-10 アニメーションイベント