Live Server是唯一可行方案，因file://协议限制导致CSS动画失效，而Live Server提供真实HTTP服务、WebSocket监听、自动刷新及缓存绕过机制。
VSCode 本身不支持 CSS 动画的实时预览，必须用 Live Server 启动本地 HTTP 服务——直接双击 HTML 或用“Open in Default Browser”打开会走 file:// 协议，动画关键特性（如 @keyframes、transform 触发条件、will-change）可能失效或行为异常。
为什么 Live Server 是唯一可行方案
浏览器对 file:// 协议有严格限制：fetch 报跨域、@import 失效、部分 CSS 动画帧被跳过、transition 在某些条件下不触发。而 Live Server 启动的是真实 http://127.0.0.1:5500 服务，注入 WebSocket 监听器，保存即刷新，且自动加时间戳绕过 CSS 缓存。
- 改了
animation-duration没反应？大概率还在用file:// - 悬停动画第一次不触发，第二次才动？
file://下:hover+transform的硬件加速初始化失败 - 开发者工具里“Animations”面板空白？因为页面没走 HTTP，Chrome 不启用完整动画调试栈
Live Server 启动后 CSS 动画仍不更新的排查点
不是插件问题，而是路径、缓存或写法卡在细节上：
-
link标签里的href必须是相对路径，且大小写完全匹配（style.css≠Style.CSS） - 避免在 CSS 中嵌套多层
@import，Live Server对三级以上@import的热重载不可靠 - 保存后 VSCode 右上角没出现
Reloading CSS…提示？说明文件根本没被监听到——检查是否在资源管理器中右键点击了正确的.html文件启动服务 - Chrome 开发者工具 → 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 动画中间帧——如果你正在调试一个需要连续交互触发的动画链（比如点击→淡入→滑动→缩放），就得配合浏览器开发者工具做局部调试，而不是只等保存刷新。
