必须用Live Server，因浏览器对file://协议有硬性限制，导致@keyframes不触发、:hover动画首次失效、transform硬件加速不初始化；Live Server提供HTTP服务、WebSocket监听、时间戳强制刷新及完整渲染管线，是唯一支持CSS动画全功能调试的方案。
必须用 Live Server，其他方式在动画场景下基本不可靠。
为什么 Live Server 是唯一能跑通 CSS 动画的方案
浏览器对 file:// 协议有硬性限制：@keyframes 不触发、:hover 动画首次失效、transform 硬件加速不初始化——这些不是你代码写错了，是浏览器根本没给你执行环境。Live Server 启动的是真实 http://127.0.0.1:5500 服务，自带 WebSocket 监听 + 时间戳强制刷新 CSS + 完整渲染管线支持，这才是动画能“动起来”的底层前提。
-
Live Preview走vscode-file://协议，不支持@keyframes和animation属性生效 - 直接双击 HTML 或右键 “Open in Browser” 仍是
file://，所有动画相关调试面板（如 Chrome 的 Animations 面板）直接空白 - 哪怕只改了
animation-duration没反应，大概率就是还在file://下运行
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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
