css-animations

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

CSS Animations Skill

CSS动画技能

Create performant, accessible CSS animations and transitions with proper timing and motion design.

创建兼具高性能、无障碍特性的CSS动画与过渡效果，并搭配合适的时序与动效设计。

Overview

概述

This skill provides atomic, focused guidance on CSS animations with performance optimization and accessibility considerations built-in.

本技能提供关于CSS动画的原子化、针对性指导，内置性能优化与无障碍考量。

Skill Metadata

技能元数据

Property	Value
Category	Motion
Complexity	Intermediate to Expert
Dependencies	css-fundamentals
Bonded Agent	03-css-animations

属性	值
分类	动效
复杂度	中级到专家级
依赖项	css-fundamentals
绑定Agent	03-css-animations

Usage

使用方法

Skill("css-animations")

Skill("css-animations")

Parameter Schema

参数 Schema

yaml

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"

yaml

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"

Topics Covered

涵盖主题

Transitions

过渡效果

Property, duration, timing-function, delay
Transitionable vs non-transitionable properties
Multi-property transitions

属性、时长、时序函数、延迟
可过渡与不可过渡属性
多属性过渡

Keyframe Animations

关键帧动画

@keyframes syntax
Animation properties (name, duration, iteration, direction)
Fill modes and play states

@keyframes语法
动画属性（名称、时长、循环次数、方向）
填充模式与播放状态

Transforms

变换

2D: translate, rotate, scale, skew
3D: perspective, rotateX/Y/Z, translateZ
Transform origin and composition

2D：translate、rotate、scale、skew
3D：perspective、rotateX/Y/Z、translateZ
变换原点与组合

Timing Functions

时序函数

Built-in: ease, linear, ease-in, ease-out, ease-in-out
cubic-bezier() custom curves
steps() for frame-by-frame

内置函数：ease、linear、ease-in、ease-out、ease-in-out
cubic-bezier()自定义曲线
steps()逐帧动画

Retry Logic

重试逻辑

yaml

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

yaml

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

Logging & Observability

日志与可观测性

yaml

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

yaml

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

Quick Reference

快速参考

Transition Template

过渡模板

css

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

css

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

Keyframe Template

关键帧模板

css

@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;
}

css

@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;
}

Performance Rules

性能规则

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

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

SAFE (仅合成器处理):
├─ transform
└─ opacity

AVOID (触发重绘/回流):
├─ width, height
├─ top, left, right, bottom
├─ margin, padding
└─ background-color

Common Effects

常见效果

Fade In

淡入

css

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

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

css

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

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

Slide Up

上滑

css

@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;
}

css

@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;
}

Pulse

脉冲

css

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

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

css

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

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

Accessibility Template

无障碍模板

css

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

css

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

Timing Function Reference

时序函数参考

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)

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)

Test Template

测试模板

javascript

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:');
  });
});

javascript

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:');
  });
});

Error Handling

错误处理

Error Code	Cause	Recovery
INVALID_ANIMATION_TYPE	Unknown animation type	Show valid options
PERFORMANCE_WARNING	Using layout-triggering properties	Suggest transform alternative
ACCESSIBILITY_MISSING	No reduced-motion fallback	Add default accessible version

错误代码	原因	恢复方案
INVALID_ANIMATION_TYPE	未知动画类型	显示有效选项
PERFORMANCE_WARNING	使用触发布局的属性	建议使用transform替代
ACCESSIBILITY_MISSING	缺少减少动效的回退方案	添加默认无障碍版本

css-animations

Original

Translation

CSS Animations Skill

CSS动画技能

Overview

概述

Skill Metadata

技能元数据

Usage

使用方法

Parameter Schema

参数 Schema

Topics Covered

涵盖主题

Transitions

过渡效果

Keyframe Animations

关键帧动画

Transforms

变换

Timing Functions

时序函数

Retry Logic

重试逻辑

Logging & Observability

日志与可观测性

Quick Reference

快速参考

Transition Template

过渡模板

Keyframe Template

关键帧模板

Performance Rules

性能规则

Common Effects

常见效果

Fade In

淡入

Slide Up

上滑

Pulse

脉冲

Accessibility Template

无障碍模板

Timing Function Reference

时序函数参考

Test Template

测试模板

Error Handling

错误处理

Related Skills

相关技能