必须用Live Server，因file://协议限制导致CSS动画失效；Live Server提供HTTP服务、WebSocket监听、自动刷新及缓存绕过，是唯一支持@keyframes、:hover、transform硬件加速及Animations面板调试的方案。
CSS 动画在 VSCode 里不能“运行”，只能在浏览器中渲染；直接双击 HTML 文件或用 Open in Default Browser 打开，大概率动画不触发、不重播、不响应 hover —— 根本原因是走 file:// 协议，被浏览器限制了关键渲染行为。
为什么 file:// 下 CSS 动画会失效
现代浏览器对本地文件协议有明确限制：不启用完整的 CSS 动画调试栈、跳过部分 @keyframes 帧、:hover + transform 硬件加速初始化失败、will-change 被忽略、animation-play-state 不可控。Chrome 的 Animations 面板在 file:// 下直接空白，就是最直观的信号。
-
animation-duration改了没反应？先看地址栏是不是file:/// - 悬停动画第一次不动、第二次才动？
file://下transform的合成层未提前创建 - 开发者工具里
Performance面板测不到 FPS？因为动画管线根本没完整启动
必须用 Live Server 启动 HTTP 服务
它不是“可选插件”，而是绕过 file:// 限制的唯一通用方案：启动真实 http://127.0.0.1:5500 服务，注入 WebSocket 监听，保存即刷新，并自动加时间戳绕过 CSS 缓存。
- 安装插件：
Live Server（作者 Ritwick Dey），不是Live Preview（微软那个） - 必须通过“文件 → 打开文件夹”加载整个项目，单个 HTML 文件拖进 VSCode 不触发服务
- 右键点击
index.html（注意是小写、无空格、无中文），选Open with Live Server - VSCode 右下角出现
Go Live: 5500才算真正启动；没出现就去Ctrl+Shift+U看输出面板里的错误日志
Live Server 启动后动画仍不更新？查这四点
不是插件坏了，而是路径、缓存、写法或监听范围卡在细节上：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
-
<link rel="stylesheet" href="css/style.css">中的路径必须和磁盘实际路径**大小写完全一致**（Style.CSS ≠ style.css） - 避免在 CSS 中写三级以上
@import，Live Server对嵌套@import的热重载不可靠 - 保存 CSS 后，VSCode 右上角没弹出
Reloading CSS…提示？说明文件根本没被监听到——检查是否右键点击了资源管理器里正确的 HTML 文件 - Chrome 开发者工具 →
Network标签 → 勾选Disable cache（仅 DevTools 打开时生效），否则旧 CSS 会被强缓存
调试动画不能只等保存刷新
Live Server 是整页 reload，它不会保留 JS 状态，也不会延续动画中间帧。如果你在调一个点击→淡入→滑动→缩放的链式动画，光靠刷新根本看不出问题。
- 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 的刷新无法模拟连续交互状态。真要验证链式触发逻辑，得靠浏览器工具局部调试，而不是反复保存刷新。
