animate.css 会覆盖自定义样式因其大量使用 !important 和高权重选择器；应将其放在自定义 CSS 之后引入，确保后者优先级更高，必要时用更具体选择器或局部重写微调。
把 animate.css 放在自定义 CSS 之后引入，就能避免它的样式覆盖你写的规则。
为什么 animate.css 会覆盖你的样式？
animate.css 是一套预设的动画类（比如 animate__bounce、animate__fadeIn），它通过 !important 和高优先级选择器（如 .animate__animated.animate__bounce）来确保动画效果生效。如果你的自定义样式写在它前面，又没用足够强的权重或 !important，就容易被覆盖。
正确引入顺序：自定义 CSS 在前，animate.css 在后
HTML 中的 标签是按顺序加载和解析的，后面的样式可以覆盖前面同名属性（前提是选择器权重相当）。所以：
- 先引入你自己的
style.css（含基础布局、颜色、尺寸等） - 再引入
animate.css - 如果要用 JS 动态添加动画类，确保 DOM 已就绪后再操作
遇到覆盖仍需微调？用更具体的选择器或局部重写
即使顺序正确，某些动画自带的默认值（如 display: inline-block、animation-fill-mode: both）可能影响布局。这时不必改 animate.css 源文件，推荐：
立即学习“前端免费学习笔记（深入）”；
- 在你自己的 CSS 里，用组合选择器提高权重，例如：
.my-box.animate__bounce { display: block !important; } - 只覆盖需要的部分，比如重设
transform-origin或animation-duration - 借助
animate__animated基础类 + 自定义动画类分层控制，避免直接修改 animate.css 的核心规则
额外建议：按需导入，减少干扰
新版 animate.css（v4+）支持 CSS Modules 和 CDN 按需引入。如果只用两三个动画，可考虑：
- 从官网复制所需动画的 CSS 片段，粘贴到你自己的样式表末尾
- 用构建工具（如 PostCSS）提取并内联关键动画，避免全量加载
- 用
@import替代 link（仅限 CSS 内部），便于统一管理顺序
