用大白话描述动画，AI 直接给你代码——animation-gen 体验

你有没有过这种感觉——脑子里能想象出一个动画长什么样，但真要写出来就懵了？什么 keyframes、什么 easing-function、什么 transform: translateX……写完还得调半天，一跑起来发现不对劲。

animation-gen 就是来解决这个问题的。

它是一个 AI Skill，你只需要用大白话描述你想要的动画效果，它就能自动生成生产级的 CSS 或 Framer Motion 代码。

一句话搞定，不用记任何语法

直接跑一行命令：

npx ai-animation "fade in from left with bounce"

它就会吐出这样的 CSS：

@keyframes fadeInFromLeftWithBounce {
  0% { opacity: 0; transform: translateX(-30px); }
  60% { transform: translateX(5px); }
  100% { opacity: 1; transform: translateX(0); }
}

你想要 Framer Motion 版本？加个参数就行：

npx ai-animation "staggered list entrance" -f framer

想要同时输出 CSS + Framer Motion 代码？

npx ai-animation "smooth slide up reveal" -f both -o animations.ts

支持复杂多段动画

这个工具不只能处理简单的淡入淡出。它能理解多步骤的复杂动画描述，比如：

npx ai-animation "shake horizontally three times then settle"

它会自动生成先左右抖动三次、最后归位的完整 keyframes。

支持哪些格式？

• CSS Keyframes：最通用的，直接复制粘贴到任何项目
• Framer Motion：React 项目首选，输出 variants 或 transition 对象
• 同时输出两者：方便跨技术栈复用

什么时候用？

做落地页需要吸引眼球的动效时用它；给 UI 加微交互（按钮悬停、卡片弹出、列表入场）时用它；或者你脑子里能想象动画效果但写不出代码的时候用它——它就是你的”动画翻译器”。

做设计稿的时候让 AI 生成动画代码，比手动调参高效多了。

怎么安装？

npx skills add https://github.com/sundial-org/awesome-openclaw-skills --skill animation-gen

前提：Node.js 18+，以及设置好 OPENAI_API_KEY 环境变量。

完全开源，MIT 协议，免费使用。属于 LXGIC Dev Toolkit 的一部分，656 个 GitHub Stars，口碑不错。

做创意/设计类 AIGC 工具推荐，这个值得收藏。

GitHub：https://github.com/sundial-org/awesome-openclaw-skills

GitHub: https://github.com/sundial-org/awesome-openclaw-skills