hyperframes-animation
HyperFrames动画知识库，提供原子级动画规则、蓝图及多运行时适配。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-animation。 它的用途是：HyperFrames动画知识库，提供原子级动画规则、蓝图及多运行时适配。 详细介绍见：https://321skill.com/skills/hyperframes-animation-x/ 请根据该页面的说明完成安装。
使用示例
‘我需要一个卡片翻转进入的动画，使用GSAP实现，并带有弹性缓动效果。’ 它会从原子规则中组合出翻转和位移动画，并为你提供GSAP中对应的弹性缓动函数API。或者，你可以说：‘加载一个多阶段的产品展示场景蓝图。’ 它会提供一个包含入场、焦点展示、退场等阶段的完整动画序列代码结构。
介绍
该Skill旨在解决前端开发中动画设计复杂、跨运行时兼容性差以及缺乏系统化知识库的问题。它整合了原子级动画规则、多阶段场景蓝图、场景过渡技巧以及七种主流动画运行时（如GSAP、Lottie、Three.js等）的适配器，将零散的动画知识体系化。
使用时，开发者可以根据具体动画任务，选择2-4条原子规则进行组合创作，或直接加载预置的场景蓝图快速搭建复杂动画序列。对于特定运行时（如GSAP的缓动函数、Lottie的播放器控制），Skill提供了详细的API查询功能。此外，它还支持对现有动画组合进行编排审计，并内置了24种命名文本动画效果。
该Skill主要适合前端开发、UI设计师以及需要在前端项目中实现复杂、高质量动画的全栈开发者和智能体开发者。对于营销专员和内容创作者，在制作宣传素材或网页动态效果时也能从中获益。
使用建议是，对于简单动画可直接组合规则，复杂场景则优先使用蓝图以提高效率。注意事项是，其核心价值在于动画逻辑与设计，虽然提供运行时适配，但具体实现仍需开发者具备对应库的基础知识。
核心特点
与单一动画库Skill不同，它提供了从原子规则到场景蓝图的完整动画设计体系，并原生支持GSAP、Lottie、Three.js等七种运行时，实现了动画逻辑与具体实现的解耦，具备单时间线、可安全跳转和确定性播放的HyperFrames原生特性。
注意事项
不适合需要完全零代码、可视化拖拽生成动画的场景，使用者仍需具备一定的动画概念和前端开发基础。
常见问题
如何用这个Skill快速创建一个文字入场动画？
可以查询内置的24种命名文本动画效果，直接调用对应的效果名称和配置参数。
它支持CSS动画吗？
支持，它包含CSS关键帧动画的运行时适配器，可以查询相关API并应用于你的项目。