Back to Details

animation-gen

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Animation Generator

动画生成器

Describing animations is easy. Writing the keyframes and easing functions is not. Tell this tool what you want to see and it'll give you the CSS or Framer Motion code to make it happen.
One command. Zero config. Just works.
描述动画很简单，但编写关键帧和缓动函数却并非如此。只需告诉这个工具你想要的效果，它就能为你生成对应的CSS或Framer Motion代码。
一条命令，零配置，即用即得。

Quick Start

快速开始

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

What It Does

功能介绍

  • Converts plain English descriptions to actual animation code
  • Supports CSS keyframes and Framer Motion variants
  • Handles complex multi-step animations
  • Outputs production-ready code you can drop in
  • 将自然语言描述转换为可运行的动画代码
  • 支持CSS关键帧和Framer Motion变体
  • 处理复杂的多步骤动画
  • 输出可直接投入生产环境的代码

Usage Examples

使用示例

bash
undefined
bash
undefined

Get CSS keyframes

获取CSS关键帧

npx ai-animation "pulse glow effect" -f css
npx ai-animation "pulse glow effect" -f css

Get Framer Motion variant

获取Framer Motion变体

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

Save to file

保存到文件

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

Complex animation

复杂动画

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

Best Practices

最佳实践

  • Be descriptive - "bounce twice then fade" beats "make it move"
  • Mention timing - include "slow", "fast", "0.5s" if timing matters
  • Specify direction - "from left", "upward", "diagonal" helps a lot
  • Test on device - animations feel different on mobile
  • 描述要具体 - “弹跳两次后淡出”比“让它动起来”效果更好
  • 说明时长 - 如果对时长有要求，请包含“缓慢”、“快速”、“0.5s”等描述
  • 指定方向 - “从左侧”、“向上”、“对角线”这类描述会大幅提升效果准确性
  • 在设备上测试 - 动画在移动端的表现会有所不同

When to Use This

使用场景

  • Building landing pages and need attention-grabbing effects
  • Adding micro-interactions to your UI
  • You can picture the animation but can't write the math
  • Prototyping quickly before fine-tuning manually
  • 构建着陆页时需要吸引注意力的特效
  • 为UI添加微交互
  • 你能想象出动画效果但不会编写对应的代码
  • 在手动微调前快速制作原型

Part of the LXGIC Dev Toolkit

属于LXGIC开发工具集

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.
Find more:
这是LXGIC Studios打造的110多款免费开发者工具之一。无付费墙，无需注册，免费 tier 无需API密钥。实用工具，即用即得。
了解更多：

Requirements

要求

No install needed. Just run with npx. Node.js 18+ recommended. Needs OPENAI_API_KEY environment variable.
bash
npx ai-animation --help
无需安装，直接使用npx运行。推荐使用Node.js 18+版本。需要配置OPENAI_API_KEY环境变量。
bash
npx ai-animation --help

How It Works

工作原理

Takes your natural language description and translates it into animation primitives. The AI understands common animation terms like "bounce", "ease", "stagger" and converts them to proper timing functions and keyframe values.
接收你的自然语言描述并将其转换为动画原语。AI能理解“bounce”、“ease”、“stagger”等常见动画术语，并将其转换为正确的缓动函数和关键帧值。

License

许可证

MIT. Free forever. Use it however you want.
Built by LXGIC Studios
MIT协议。永久免费。可随意使用。
由LXGIC Studios开发