link引入动画库时rel必须为"stylesheet"且href指向可访问的CSS文件，否则动画静默失效；CSS需置于head内无media属性，多库共存需注意加载顺序与命名冲突。
link引入动画库时rel和href必须同时正确
浏览器只认 rel="stylesheet" 才会真正加载并解析 CSS 动画规则；写成 rel="style"、rel="css" 或漏掉，文件照样下载但动画完全不生效，控制台也不报错——静默失败是最难排查的。
href 路径必须指向实际可访问的 CSS 文件，不是 CDN 页面链接（比如误粘贴了 unpkg.com 上的 HTML 预览页 URL），也不是 JS 入口文件（如 animate.min.js）。常见错误是把动画库的 JS 版本路径当成了 CSS 版本。
- 查文档确认该动画库是否提供独立 CSS 文件（如 Animate.css 提供
animate.min.css，而 Framer Motion 是纯 JS 库，不适用link） - CDN 地址优先选官方推荐的，例如 Animate.css 官网明确给出：
https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css - 本地部署时，确保文件后缀是
.css，且服务器返回Content-Type: text/css，否则样式静默失效
动画库 CSS 必须放在 head 里，且不能被 media 屏蔽
把 <link rel="stylesheet" href="..."> 放在 <body> 里，或用 media="print"、media="(max-width: 480px)" 等条件包裹，会导致动画类（如 animate__bounce）在页面首次渲染时不可用——你写的 class="animate__animated animate__bounce" 会直接被忽略，直到媒体查询匹配才“突然生效”，造成布局跳变或动效缺失。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 务必放在
<head>内，紧贴<title>后即可，别混在一堆<script>中间 - 不要加
media属性，除非你明确只在某设备类型下启用整套动画（极少见） - 避免用
disabled="disabled"临时禁用——它会让 class 失效且不触发重绘，调试时直接删标签更可靠
多个动画库共存时顺序和命名冲突要手动处理
如果同时引入 Animate.css 和自定义动画 CSS，或者用了两个不同版本的同一库，animate__fadeIn 这类类名可能被覆盖或行为异常。浏览器按 <link> 书写顺序加载 CSS，后加载的同名 @keyframes 和选择器会覆盖前面的。
立即学习“前端免费学习笔记（深入）”；
- 优先只引入一个主动画库，避免叠加；若必须共存，把第三方库放前面，自定义动画放后面
- 检查是否启用了 Animate.css 的
animate__prefix自定义前缀功能（需配合 JS 初始化），否则直接改 class 名易出错 - 注意构建工具（如 Vite）可能自动注入
<link>，手动再写一条会导致重复加载或路径错位
预加载动画 CSS 可能反而拖慢首屏，慎用 preload
有人想用 <link rel="preload" as="style" href="..."> 加速动画库加载，但这是个误区：preload 不会执行 CSS 解析，且必须配 onload 脚本手动切换 rel 值才能生效，而 <link> 原生不支持 onload 事件（Firefox 不触发），强行加会导致兼容性断裂。
- 对动画库这类非关键渲染资源，用标准
<link rel="stylesheet">即可，浏览器自有加载优先级调度 - 真要优化，应压缩 CSS、启用 Gzip/Brotli、用 HTTP/2 多路复用，而不是硬上 preload
- 如果动画只在用户交互后才触发（如点击弹窗），考虑 JS 动态插入
<link>，但要接受首次触发有毫秒级延迟
link 引入看着简单，但路径错一位、rel 少一个字母、放错位置，都会让动画“看起来写了却不动”。最常被忽略的是服务器 MIME 类型和构建工具自动注入的干扰——这两点不出现在控制台报错里，只能靠 Network 面板看响应头和 Initiator 列交叉验证。 
