企业官网建设流程全解析

如何为 Animate.css 生成自定义构建产物（源码裁剪 + npm start）？

【免费下载链接】animate.css🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.项目地址: https://gitcode.com/gh_mirrors/an/animate.css

当你的项目只需要 Animate.css 中的几组动画，或者想把默认类前缀animate__换成自己的前缀时，就可以生成一个自定义构建。整个过程分两步：先编辑仓库里的 source/animate.css 删掉不需要的@import，再运行npm start在项目根目录产出裁剪后的animate.css、animate.min.css和animate.compat.css三个文件。这里有一个硬性前提：构建工具没有随 npm 包发布，所以不能在node_modules里做自定义构建，必须拿到 Animate.css 的完整仓库源码和 Node 环境。

前置条件：准备源码与依赖

官方文档（Custom Builds）给出的起点是：

git clone https://gitcode.com/gh_mirrors/an/animate.css cd animate.css npm install

说明一下：源文档中的原始命令使用的是 GitHub 官方仓库地址，这里按发布渠道写成了镜像站地址；git clone得到的目录名以实际为准，cd进入仓库根目录后执行npm install。

构建链路是 npm + postcss + postcss-preset-env：npm install会装好 package.json 里devDependencies声明的 postcss、postcss-cli、postcss-import、postcss-prefixer、cssnano、autoprefixer、npm-run-all 等构建工具。package.json中的browserslist配置为"> 3%"和"last 2 versions"，它决定了 autoprefixer 生成兼容性回退的范围。

裁剪 source/animate.css

source/animate.css 是整个构建的入口，所有动画都通过@import按类别引入（attention_seekers、bouncing_entrances、fading_exits、zooming_exits 等）。自定义构建的"裁剪"就是直接编辑这个文件：删掉不要的@import，只保留你要用的。

官方文档给的示例是"只用 attention seekers 这一类动画"，把文件中的@import全部删除后，替换为（文档示例）：

@import 'attention_seekers/bounce.css'; @import 'attention_seekers/flash.css'; @import 'attention_seekers/pulse.css'; @import 'attention_seekers/rubberBand.css'; @import 'attention_seekers/shake.css'; @import 'attention_seekers/headShake.css'; @import 'attention_seekers/swing.css'; @import 'attention_seekers/tada.css'; @import 'attention_seekers/wobble.css'; @import 'attention_seekers/jello.css'; @import 'attention_seekers/heartBeat.css';

注意一点：默认文件开头还有两行@import '_vars.css';和@import '_base.css';，文档示例里没有列出它们。source/_vars.css 定义了--animate-duration、--animate-delay、--animate-repeat等 CSS 变量，source/_base.css 定义了animated、infinite、slow、delay-1s这类工具类，以及prefers-reduced-motion/ 打印媒体查询下的降级规则。如果你页面上会使用animate__animated这个基础类或这些工具类，这两行应当保留；完全不用时删掉即可。

运行 npm start 生成三个产物

编辑完成后，在仓库根目录运行：

npm start

npm start实际执行的是 package.json 中定义的npm-run-all raw prod compat，即按顺序跑三次 postcss 编译：

development环境下不启用 cssnano；production和compat环境会压缩（见 postcss.config.js）。也就是说，跑一次npm start，三个产物都会落在项目根目录。

验证构建结果

两个判断点：

1. 终端输出。postcss.config.js 在每次编译成功后会打印一条消息（源码中拼写即如此）。由于npm start串行执行三个环境，你会依次看到 development、production、compat 三条，其中一条的文档示例输出为：

   🎉🎉🎉🎉 animate.css development build was compiled sucessfully!

2. 文件内容。确认根目录生成了animate.css、animate.min.css、animate.compat.css三个文件后，打开产物检查裁剪是否生效：搜索保留动画的名称（如bounce）应当能命中；搜索已删除动画的名称（如把 sliding 类全删掉后搜slideInDown）应当查不到。animate.compat.css里所有类名都不带前缀，这是预期行为，不是构建错误。

可选：修改默认类前缀

如果你想避免animate__前缀与项目自己的类名冲突，官方文档给出的做法是改 package.json 里的animateConfig：

/* on Animate.css package.json */ "animateConfig": { "prefix": "myCustomPrefix__" },

然后重新运行npm start。构建时 postcss-prefixer 会把 source/ 下各动画文件的类名加上这个前缀，默认前缀是animate__。改完之后，页面用法里的类名也要跟着换：class="animate__animated animate__bounce"变为class="myCustomPrefix__animated myCustomPrefix__bounce"。

一个限制要注意：postcss.config.js中prefix = ctx.env === 'compat' ? '' : animateConfig.prefix，即compat环境下前缀恒为空——animate.compat.css始终是不带前缀的，自定义前缀只作用于animate.css和animate.min.css。

可选：监听模式

在反复调整裁剪清单时，可以改用 package.json 中的dev脚本：

npm run dev

它等价于npx postcss source/animate.css -o animate.css --no-map --env development -w，其中-w开启 postcss-cli 的 watch 模式：保存source/animate.css后自动重新编译，但只输出 development 环境的animate.css，不生成压缩版本。最终交付前仍应跑一次完整的npm start产出三个产物。

限制与后续

• animate.compat.css的定位只是 v3 及更早版本迁移的过渡方案。官方迁移文档（Migration from v3.x and Under）明确提醒：新项目建议使用默认带前缀的版本，并且后续版本可能会弃用animate.compat.css文件。
• 产物生成后如何引入页面，按 Installation and Usage 的方式：打包工具里import 'animate.css'（指向你自己构建的文件），或在 HTML 中引用该样式表；类名一律使用当前构建所用的前缀。
• 仓库内根目录已有的animate.css、animate.min.css、animate.compat.css是仓库预置的构建产物，npm start会用你的裁剪结果覆盖它们，因此不要直接改这三个文件——要改的永远是source/下的源码。

【免费下载链接】animate.css🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.项目地址: https://gitcode.com/gh_mirrors/an/animate.css