小球跳动动画需用HTML+CSS实现，VS Code仅编辑、浏览器渲染；关键在正确路径、animation与@keyframes配对、设置宽高和定位、使用transform而非top，并通过Live Server预览和DevTools调试。
用 HTML+CSS 在 VS Code 里写小球跳动动画，根本不用装插件
VS Code 只是编辑器，动画靠浏览器渲染。你写好 index.html，右键“Open with Live Server”或拖进 Chrome 就能看效果——别在 VS Code 里找“动画预览按钮”，它真没有。
常见错误现象：小球不动、页面空白、控制台报错 Failed to load resource，基本都是路径写错或没加 容器。
- 把 HTML 文件和图片（如果用了）放在同一目录，路径用相对路径，比如
./ball.png - 确保
<style></style>或 CSS 文件里写了animation，且@keyframes名称和animation-name完全一致（大小写敏感） - 别漏掉
display: block或position: relative/absolute—— 默认inline元素不认width/height，小球会塌成一条线
关键 CSS 属性：animation 和 @keyframes 怎么配对才生效
动画卡住、只动一帧、来回闪，八成是 animation 缩写没写全，或者 @keyframes 里漏了 to 或 100%。
一个最小可运行示例：
<div class="ball"></div>
<style>
.ball {
width: 40px;
height: 40px;
background: #ff6b6b;
border-radius: 50%;
animation: jump 1s ease-in-out infinite;
}
@keyframes jump {
0% { transform: translateY(0); }
50% { transform: translateY(-80px); }
100% { transform: translateY(0); }
}
</style>
-
animation至少要带时长（如1s）和名称（如jump），否则不触发 -
@keyframes jump必须和animation-name: jump完全同名；VS Code 不校验这个，写错就静音 - 用
transform: translateY()而不是top，性能更好，也避免触发重排
想让小球弹得真实？重点调 timing-function 和 iteration-count
默认 ease 是缓入缓出，但真实弹跳是先快后慢再反弹——直接换 cubic-bezier(.2, .7, .4, 1.2) 会更自然，别硬背数值，用 Chrome DevTools 的动画面板拖着调。
-
animation-timing-function: cubic-bezier(.2, .7, .4, 1.2)比bounce更可控（CSS 原生没bounce关键字） - 加
animation-iteration-count: infinite才循环；写成1就跳一下停住 - 如果想模拟落地回弹衰减，得用 JS 控制多个关键帧或叠加多个动画层，纯 CSS 做不了指数衰减
VS Code 里调试动画的三个实际动作
别指望编辑器高亮帮你发现动画逻辑问题。真正管用的是这三步：
- 右键 HTML 文件 → “Open with Live Server”，确保地址是
http://127.0.0.1:5500/开头，不是file://协议（否则部分 CSS 动画不工作） - F12 打开 DevTools → “Animations” 标签页，能暂停、慢放、看当前帧，还能实时改
animation-duration - 在
Elements面板里勾选:hover或:active，快速验证交互触发的动画是否写对选择器
容易被忽略的点：动画元素如果被父容器 overflow: hidden 截断，跳到一半就消失；或者用了 will-change: transform 却忘了加前缀兼容老 Chrome——这些都不会报错，但效果就是不对。
