css-animations

CSS 动画技能

创建高性能、易于访问的 CSS 动画和过渡效果，并采用恰当的时序与运动设计。

概述

此技能提供原子化、聚焦的 CSS 动画指导，并内置性能优化和无障碍考量。

技能元数据

属性	值
类别	动效
复杂度	中级到专家级
依赖项	css-fundamentals
绑定的 Agent	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（滚动驱动动画）