Animista

Animista 是一个按需生成的 CSS 动画库，提供预置动画的在线调试与代码导出，让开发者只下载实际使用的动画片段。

核心功能：从预览到代码的一站式调试

用户可在首页选择对象类型（如 box、circle、image、button、text、letter、bg gradient、card flip、cube、triangular prism、svg logo 等），调整 duration、timing-function（含 easeInQuad、easeOutBack、easeInOutCirc 等 30 余种曲线）、delay、iteration-count（infinite 或指定次数）、direction（normal/reverse/alternate/alternate-reverse）、fill-mode（none/forwards/backwards/both），并实时观察动画效果。满意后点击“Fav”收藏，最终在下载页统一导出。

• 对象类别：涵盖 18 种以上动画载体，包括背景渐变、卡片翻转、几何体等
• 缓动函数：提供 linear、ease 系列及 Quad/Cubic/Quart/Quint/Sine/Expo/Circ/Back 等 30+ 选项
• 步骤动画：支持 steps(start/end) 与 step 函数
• 代码导出：可生成 minified + autoprefixed CSS，支持复制 Class 或 Keyframes
• 下载限制：依赖 HTML5 FileSystem API，仅 Chrome 支持直接下载 .css 文件，其他浏览器可复制代码

项目背景与适用场景

Animista 由个人开发者创建，最初是为了将常用 CSS 动画组织成可复用的形式，并提供一个测试环境来观察 easing、delay、duration 等参数对动画的实际影响。项目在 Product Hunt 上被评为周产品和日产品，并被 net magazine（印刷版专题）、Creative Bloq、Smashing Magazine、CSS-Tricks、Hongkiat 等媒体报道。

• 诞生动机：开发者因频繁使用 CSS 动画，希望有一个可随意调试并复用的动画游乐场
• 技术贡献：JS 部分由 @sergej108 协助完成
• 媒体曝光：曾登上 net 杂志印刷版专题文章
• 流量规模：月均数万独立访客（官网赞助页面自述）

品牌赞助与隐私说明

网站通过 Premium 赞助商位获取收入，赞助商标识展示在首页及全站页面。Logo 规格为 30px 高、最大 220px 宽（高 PPI 屏幕 60px/440px），接受 SVG、PNG、JPG 格式。赞助商需为技术相关业务，且由站方筛选。隐私方面，Animista 使用 Google Analytics（Cookie + Usage Data）、BuySellAds（广告 Cookie）和 Mailchimp（邮件地址），用户可拒绝 Cookie 但部分功能可能受限。

• 赞助申请：联系 cssanimista@gmail.com，主题注明“Animista Sponsorship”
• 数据收集：包括 IP、浏览器类型、访问页面、时间戳等 Usage Data
• 隐私政策生效日：2019 年 12 月 26 日
• 代码许可：生成的 CSS 基于 FreeBSD License，可免费用于个人和商业项目

常见问题

Q1：Animista 下载的 CSS 文件在非 Chrome 浏览器上怎么获取？

A1：Chrome 可直接下载 .css 文件；其他浏览器可通过“Copy Class”或“Copy Keyframes”按钮将生成的代码复制到剪贴板，再粘贴到编辑器中保存。

Q2：Animista 的动画是否兼容老旧浏览器？

A2：部分动画属于实验性特性，即使添加 Autoprefixer 也可能在旧浏览器中表现异常。建议使用 caniuse.com 检查具体动画的浏览器支持情况。

Q3：如何在 Animista 中同时选择多个动画并批量导出？

A3：浏览动画时点击“Fav”按钮收藏，收藏列表会累积；点击下载按钮进入下载页，可查看所有已收藏动画，并逐一移除不需要的项，最后生成包含所有选中动画的 CSS 代码。

更多同类工具与网站,可在在线编程分类继续挑选。

信息核实于 2026年7月,具体以官网为准。