CSS Animation Playground

一个交互式的 CSS 动画学习平台，帮助开发者探索和理解各种动画效果。

🎨 功能亮点

• 实时预览：即时查看 CSS 动画效果
• 代码生成：自动生成可复制的 CSS 代码
• 预设库：内置常用动画效果
• 自定义编辑器：支持实时编辑和调试
• 分享功能：保存和分享动画作品

🛠️ 核心技术

动画引擎

结合原生 CSS 和 GSAP 实现复杂动画：

.bounce-animation {
  animation: bounce 2s infinite cubic-bezier(0.280, 0.840, 0.420, 1);
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

实时编辑器

基于 CodeMirror 的代码编辑器：

const editor = CodeMirror.fromTextArea(textarea, {
  mode: 'css',
  theme: 'monokai',
  lineNumbers: true,
  autoCloseBrackets: true
});

editor.on('change', debounce(updatePreview, 300));

🎯 教育价值

动画原理可视化

• 缓动函数图表：直观显示不同 easing 函数的效果
• 时间轴控制：逐帧查看动画过程
• 性能指标：实时显示 FPS 和性能数据

学习路径

• 从基础的 transition 开始
• 逐步学习 keyframes 动画
• 探索高级的 GSAP 动画

🚧 开发中功能

• 3D 动画支持
• 物理引擎集成
• 团队协作功能
• 移动端适配
• 深色主题

💡 设计思路

这个项目的目标是让 CSS 动画学习变得更加直观和有趣，通过可视化的方式帮助开发者理解动画原理。