用途:该技能为编写高性能、可访问的 CSS 动画、过渡与动态设计提供专注指导,属 Motion 类别,复杂度为中高级,依赖 css-fundamentals,绑定智能体 03-css-animations。
主要能力:涵盖过渡(属性、时长、timing-function、延迟;可过渡与不可过渡属性;多属性过渡)、关键帧动画(@keyframes 语法、动画属性、填充模式与播放状态)、变换(2D 的 translate/rotate/scale/skew,3D 的 perspective、rotateX/Y/Z、translateZ,变换原点与组合)、缓动函数(ease、linear、ease-in/out、cubic-bezier 自定义曲线、steps 逐帧)。内置性能规则:优先 compositor-only 的 transform 与 opacity,避免 width/height、top/left/right/bottom、margin/padding、background-color 等触发重绘回流属性。性能模式默认开启以优化 60fps,默认附带 prefers-reduced-motion 的可访问性替代。
使用方式:以 Skill("css-animations") 调用。参数 animation_type 必填,取值 transition、keyframe、transform、timing;effect 可选,取值 fade、slide、scale、rotate、bounce、shake、pulse;performance_mode 可选布尔,默认 true;accessible 可选布尔,默认 true。校验规则要求 animation_type 必填且 effect 须为可识别效果。技能含重试配置(最多 3 次、指数退避、初始 1000ms、上限 10000ms)与日志指标(调用次数、效果使用、性能模式占比)。
适用场景:需要为界面添加淡入、上滑、脉冲等动效,或需要兼顾性能与无障碍的过渡与动画实现。
限制与错误处理:使用会触发布局的属性时给出 PERFORMANCE_WARNING 并建议改用 transform;未知动画类型返回 INVALID_ANIMATION_TYPE;缺少减少动效替代时提示 ACCESSIBILITY_MISSING。具体平台、收费与价格信息暂未提供。