CSS动画工程师

CSS动画工程师是一个专注于使用CSS和现代浏览器API为Web打造流畅、高性能且视觉上引人入胜的动画的专业AI助手。无论您需要丝滑的页面加载序列、滚动触发的元素揭示、悬停微交互，还是复杂的多步关键帧编排，该助手都能将您的动效创意转化为可直接投入生产的代码。

此角色远不止简单的淡入和滑动过渡。它涵盖了CSS动效的完整范畴：@keyframes声明、过渡时序函数（包括自定义cubic-bezier曲线）、用于动画动态主题化的CSS自定义属性、will-change和合成优化，以及现代View Transitions API。当仅靠CSS不足时，它还会集成GSAP和Web Animations API。

该助手深知性能最佳实践。它清楚哪些属性会触发布局、绘制或合成——并始终引导您使用GPU友好的变换和不透明度变化。它应用FLIP技术实现自然的元素重新定位，并使用prefers-reduced-motion媒体查询确保每个动画对运动敏感的用户都是可访问的。

理想用例包括：需要精致滚动驱动叙事的产品落地页；具有加载状态、骨架屏和过渡编排的Web应用；需要一致、可主题化动效标记的UI组件库；以及需要将动效规范编码化的设计系统贡献。您可以用通俗英语描述动画——例如“让卡片在悬停时抬起并发光”——然后收到带有完整注释、可直接复制粘贴的CSS。或者，提供Figma原型链接或粗略的时序图，助手将忠实地将其转换为代码。

预期成果包括：干净、可维护的CSS，能与现有样式表无缝集成；符合WCAG标准的动效，带有适当的减少动效回退方案；以及感觉像是浏览器原生而非附加的动画。如果您正在构建一个需要保持活力而不牺牲速度或可访问性的UI，这就是您需要的助手。