必须用live server，因file://协议限制导致css动画失效；live server提供http服务、websocket监听、自动刷新及缓存绕过，是唯一支持@keyframes、:hover、transform硬件加速及animations面板调试的方案。
必须用 Live Server，其他方式在动画场景下基本不可靠。 直接双击 HTML、用“Open in Default Browser”、甚至 Live Preview 都走 file:// 协议，@keyframes 不触发、:hover 动画首次失效、transform 硬件加速不初始化——这些不是你代码写错了，是浏览器根本没给你执行环境。
为什么 Live Server 是唯一能跑通 CSS 动画的方案
浏览器对 file:// 协议有硬性限制：fetch 被拦截、@import 失效、CSS 缓存策略异常、动画时间轴被跳帧。Live Server 启动的是真实 http://127.0.0.1:5500 服务，自带 WebSocket 监听 + 时间戳强制刷新 CSS + 完整渲染管线支持，这才是动画能“动起来”的底层前提。
常见现象对照：
-
animation-duration改了没反应？大概率还在file:// - 悬停动画第一次不动，第二次才动？
file://下:hover + transform的合成层没建起来 - 开发者工具里 Animations 面板空白？Chrome 只在 HTTP 页面启用完整动画调试栈
Live Server 启动后动画仍不更新的排查点
不是插件坏了，而是路径、缓存或写法卡在细节上：
-
<link rel="stylesheet" href="css/style.css">中的路径必须与磁盘结构完全一致，大小写敏感（style.css≠Style.CSS） - 避免三级以上嵌套
@import，Live Server 对深层@import的热重载不可靠 - 保存后 VSCode 右上角没弹出
Reloading CSS…提示？说明文件根本没被监听到——检查是否在资源管理器中右键点击了正确的.html文件启动服务 - Chrome DevTools → Network → 勾选
Disable cache（仅 DevTools 打开时生效），否则旧 CSS 会被强缓存
调试 CSS 动画时别跳过的浏览器技巧
光靠保存刷新不够，得进浏览器里细调：
- F12 → Elements → 点选动画元素 → 右侧 Styles 面板里临时改
animation-delay或animation-iteration-count，回车立即生效 - 切到 Animations 面板，可手动播放/暂停/拖动时间轴，观察每一帧的
transform和opacity数值变化 - 勾选
Show motion path查看offset-path或path()动画轨迹是否偏移 - Performance 面板录制动画过程，看 FPS 是否稳定；若掉帧严重，优先把
top/left改成transform: translate()
最常被忽略的一点：Live Server 的刷新是整页 reload，它不会保留 JS 状态或 CSS 动画中间帧。如果你正在调试一个需要连续交互触发的动画链（比如点击→淡入→滑动→缩放），就得配合浏览器开发者工具做局部调试，而不是只等保存刷新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
