恒美微站 Logo 恒美微站
  • 首页
  • 关于我们
  • 建站服务
  • 主题模板
  • 案例展示
  • 资讯中心
  • 联系我们

如何为 Animate.css 生成自定义构建产物(源码裁剪 + npm start)?

  • 首页
  • 资讯中心
  • /
  • 如何为 Animate.css 生成自定义构建产物(源码裁剪 + npm start)?

相关资讯

池化资源共享题解:区间重叠最大值与差分数组、扫描线多语言实现 2026/9/9 21:54:41
Fab MES核心模块与实施避坑指南:从Lot到RTD的制造执行系统解析 2026/9/9 21:54:41
微信扫码登录原理与Java实战:从OAuth 2.0到开放平台接入全攻略 2026/9/9 21:54:41

最新资讯

用 Anthropic Cybersecurity Skills 编写 CMMC Level 2 就绪报告:110 项 800-171 控制、SPRS 评分与 POAM 完整实战
SpringBoot+Vue民宿预订管理系统开发实践:从架构设计到部署上线
Spring Boot+Vue+Node.js售后服务系统开发实战
AI搜索的信任缺口:企业内容如何在答案时代自证可信
AI搜索重构内容生态:企业从“流量争夺”转向“答案共建”
MAX9286+MAX96705实现4路AHD转MIPI CSI-2车载环视方案

今日推荐

AI搜索重构内容生态:企业从“流量争夺”转向“答案共建”
AI搜索的信任缺口:企业内容如何在答案时代自证可信
Spring Boot+Vue+Node.js售后服务系统开发实战

本周热门

超人会飞不算本事:系统稳定依赖清晰规则与边界设计
超人VS蜘蛛侠:拆解超级IP的影响力与传播方法论
基于CNN的调制信号识别:MATLAB实现时频图分类实战

本月精选

自研推理加速器Redwood:两周内实现PyTorch模型高效部署的实战教程
V4L2摄像头采集实战:从camera_client.rar到出图全流程解析
从“谁发明了钢琴键”到知识问答智能体:RAG与记忆工程实践

如何为 Animate.css 生成自定义构建产物(源码裁剪 + npm start)?

发布时间:2026/9/9 21:59:41
如何为 Animate.css 生成自定义构建产物(源码裁剪 + npm start)? 如何为 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-envnpm 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.csssource/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 startnpm start实际执行的是 package.json 中定义的npm-run-all raw prod compat即按顺序跑三次 postcss 编译步骤命令输出文件用途rawnpx postcss source/animate.css -o animate.css --no-map --env developmentanimate.css原始构建可读、未做任何优化prodnpx postcss source/animate.css -o animate.min.css --no-map --env productionanimate.min.css压缩后的生产构建compatnpx postcss source/animate.css -o animate.compat.css --no-map --env compatanimate.compat.css压缩后的生产构建不带类前缀仅作为 v3 旧版本迁移的便利路径development环境下不启用 cssnanoproduction和compat环境会压缩见 postcss.config.js。也就是说跑一次npm start三个产物都会落在项目根目录。验证构建结果两个判断点终端输出。postcss.config.js 在每次编译成功后会打印一条消息源码中拼写即如此。由于npm start串行执行三个环境你会依次看到 development、production、compat 三条其中一条的文档示例输出为 animate.css development build was compiled sucessfully!文件内容。确认根目录生成了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__。改完之后页面用法里的类名也要跟着换classanimate__animated animate__bounce变为classmyCustomPrefix__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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

关于恒美微站

恒美微站专注于为个体商户、工作室提供极简自助建站服务,让每个人都能轻松拥有专业网站。

快速链接

  • 关于我们
  • 建站服务
  • 主题模板
  • 案例展示
  • 资讯中心

服务项目

  • 可视化建站
  • 拖拽编辑
  • 主题定制
  • SEO 优化
  • 网站托管

联系方式

  • 📍 地址:北京市朝阳区建国路 88 号
  • 📞 电话:400-888-8888
  • ✉️ 邮箱:info@hmyw.cn
  • 🕐 时间:周一至周日 9:00-18:00

© 2024 恒美微站 hmyw.cn 版权所有 | 京 ICP 备 12345678 号