在日常前端开发中，动画环节长期存在两大痛点。一是 UI 设计师与前端之间的"动画鸿沟"：设计师不清楚前端能实现哪些 CSS 动画，往往凭感觉提需求，前端也难以准确还原设计意图，双方只能靠文字或参考视频反复沟通，效率低、还原一致性差。二是团队缺乏系统化的动画代码资产：每次遇到动画需求都要从零搜索零散代码、手动调参，完成后又难以沉淀复用，动画经验始终停留在个人层面。本项目立项正是为搭建一个可视化、所见即所得的 CSS 动画知识库与共识平台：让设计师直接浏览效果并指定所需动画，前端一键获取代码、在线调参、导出到目标框架，从根本上消除双方信息不对称，同时为团队沉淀可复用的动画代码资产，并通过 AI 能力进一步降低动画开发门槛。
本平台收录 102 个精选 CSS 动画，覆盖交互按钮、加载反馈、文字特效、背景氛围、运动效果、大数据可视化等 8 大分类，每个动画均提供实时可视化预览与一键复制完整代码。核心功能：1、动画资源库——支持分类筛选，让 UI 与前端对着同一画面沟通；2、代码实验室——在线编辑 HTML / CSS 即时生效，并提供参数化调节（滑块调时长、下拉切缓动），当场拖动参数确认效果；3、AI 智能功能矩阵（核心差异化）——含 AI 自然语言语义搜索、对话式动画生成、对已有动画输入指令自动改造、AI 原理中文解读、一键导出 React / Vue / Tailwind 代码、多轮上下文对话等多项 AI 能力；4、主题与外观——11 种预设主题色 + 自定义颜色，深浅色模式一键切换，便于不同品牌调性下预览。支持自定义 AI 接口配置与 SSE 流式输出。
本项目由我独立完成需求设计、架构与全部开发，累计 91 次提交，基于 Vite 构建，并配套 GitHub Actions CI/CD（Node 20 下自动执行依赖安装、ESLint、Vitest、Build）。工程实践：将原本单体的 styles.css 与 main.js 重构为模块化结构——JS 按 data / utils / snippets / modal / ai / promptBuilder 等职责拆分，CSS 按 variables / themes / base / layout / components / animations 分层，提升可维护性；使用 Vitest 编写单元测试（含参数替换防回归守卫），保障新增动画不破坏既有效果。AI 能力实现：自定义 AI 接口配置、Prompt 构建模块、SSE 流式输出与不完整行处理、对话式生成与改造、框架代码导出。此外用 Playwright 编写自动化脚本批量录制动画演示视频与截图，并集成 Remotion 做视频合成。技术栈：Vite + 原生 JS（ES Module）+ Vitest + Playwright + Remotion + 多模型 AI 接入。同时沉淀了 add-animation / new-category / check 等自动化开发 skill。
评论