css-animations

CSS アニメーションスキル

適切なタイミング設定とモーションデザインを用いて、パフォーマンスに優れ、アクセシブルな CSS アニメーションとトランジションを作成します。

概要

このスキルでは、パフォーマンス最適化とアクセシビリティへの配慮を組み込んだ、CSS アニメーションに関する簡潔で焦点を絞ったガイダンスを提供します。

スキルのメタデータ

プロパティ	値
カテゴリ	モーション
複雑さ	中級から上級
依存関係	css-fundamentals
連携エージェント	03-css-animations

使用方法

Skill("css-animations")

パラメータスキーマ

parameters:
  animation_type:
    type: string
    required: true
    enum: [transition, keyframe, transform, timing]
    description: Type of animation to create

  effect:
    type: string
    required: false
    enum: [fade, slide, scale, rotate, bounce, shake, pulse]
    description: Predefined animation effect

  performance_mode:
    type: boolean
    required: false
    default: true
    description: Optimize for 60fps performance

  accessible:
    type: boolean
    required: false
    default: true
    description: Include reduced-motion alternatives

validation:
  - rule: animation_type_required
    message: "animation_type parameter is required"
  - rule: valid_effect
    message: "effect must be a recognized animation effect"

対象トピック

トランジション

• プロパティ、期間、タイミング関数、遅延
• トランジション可能なプロパティと不可能なプロパティ
• 複数プロパティのトランジション

キーフレームアニメーション

• @keyframes の構文
• アニメーションのプロパティ（名前、期間、繰り返し、方向）
• フィルモードと再生状態

トランスフォーム

• 2D：translate、rotate、scale、skew
• 3D：perspective、rotateX/Y/Z、translateZ
• トランスフォームの原点と合成

タイミング関数

• 組み込み：ease、linear、ease-in、ease-out、ease-in-out
• cubic-bezier() によるカスタム曲線
• フレーム単位のアニメーションに使う steps()

再試行ロジック

retry_config:
  max_attempts: 3
  backoff_type: exponential
  initial_delay_ms: 1000
  max_delay_ms: 10000

ロギングと可観測性

logging:
  entry_point: skill_invoked
  exit_point: skill_completed
  metrics:
    - invocation_count
    - effect_usage
    - performance_mode_ratio

クイックリファレンス

トランジションのテンプレート

.element {
  transition: property duration timing-function delay;
  transition: transform 0.3s ease-out;
  transition: opacity 0.2s, transform 0.3s ease-out;
}

キーフレームのテンプレート

@keyframes animation-name {
  0% { /* start state */ }
  50% { /* midpoint state */ }
  100% { /* end state */ }
}

.element {
  animation: name duration timing-function delay iteration-count direction fill-mode;
  animation: slide-in 0.5s ease-out forwards;
}

パフォーマンスのルール

SAFE (Compositor-only):
├─ transform
└─ opacity

AVOID (Trigger repaint/reflow):
├─ width, height
├─ top, left, right, bottom
├─ margin, padding
└─ background-color

よくあるエフェクト

フェードイン

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

上方向へのスライド

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slide-up 0.4s ease-out forwards;
}

パルス

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

アクセシビリティのテンプレート

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

タイミング関数のリファレンス

cubic-bezier(x1, y1, x2, y2)

ease:        (0.25, 0.1, 0.25, 1.0)
ease-in:     (0.42, 0, 1.0, 1.0)
ease-out:    (0, 0, 0.58, 1.0)
ease-in-out: (0.42, 0, 0.58, 1.0)

Custom:
Bounce:      (0.68, -0.55, 0.265, 1.55)
Snap:        (0.5, 0, 0.75, 0)
Smooth:      (0.4, 0, 0.2, 1)

テストのテンプレート

describe('CSS Animations Skill', () => {
  test('validates animation_type parameter', () => {
    expect(() => skill({ animation_type: 'invalid' }))
      .toThrow('animation_type must be one of: transition, keyframe...');
  });

  test('returns accessible version when flag is true', () => {
    const result = skill({
      animation_type: 'keyframe',
      effect: 'fade',
      accessible: true
    });
    expect(result).toContain('prefers-reduced-motion');
  });

  test('uses compositor-only properties in performance mode', () => {
    const result = skill({
      animation_type: 'transform',
      performance_mode: true
    });
    expect(result).not.toContain('left:');
    expect(result).not.toContain('top:');
  });
});

エラー処理

エラーコード	原因	対処方法
INVALID_ANIMATION_TYPE	不明なアニメーションタイプ	有効な選択肢を表示する
PERFORMANCE_WARNING	レイアウトを発生させるプロパティを使用している	transform を代替として提案する
ACCESSIBILITY_MISSING	視覚効果の軽減設定に対するフォールバックがない	アクセシブルなデフォルト版を追加する

関連スキル

• css-fundamentals（前提条件）
• css-performance（アニメーションの最適化）
• css-modern（スクロール駆動アニメーション）