今天捣鼓那个兔子跳跃动画的时候可把我整乐了，顺手把几种实现方法都拎出来遛了遛。事情得从我刷到个网页效果说起——页面上有只傻兔子一蹦一蹦的，我寻思这玩意儿用CSS随便搞个过渡不就完事了？
动手第一步：transition硬刚
抄起键盘先拿transition试水，给兔子的腿绑了个上下移动。代码大概长这样：
- .rabbit-leg { transition: transform 0.3s; }
- .jump:hover .rabbit-leg { transform: translateY(-20px); }
手一摸鼠标悬停，兔子腿倒是动了，可那动作跟抽筋似的直上直下，落地还“哐当”抖两下，笨得像军训踢正步。
转战CSS动画
我赶紧换了animation大法，keyframes里塞了三个点位：蹲下、跳起、落地。心想这回总该顺溜了：
- @keyframes jump {
0% { transform: scaleY(1); }
50% { transform: translateY(-50px) scaleY(0.8); }
100% { transform: translateY(0); }
兔子倒是蹦出弧线了，可连续跳的时候跟发条玩偶似的，每跳完一下都得卡个小停顿，看得我强迫症发作。
祭出JS大杀器
心一横打开了编辑器写requestAnimationFrame。先给兔子绑个点击事件，点一下就启动跳跃循环：
- let jumpHeight = 0;
function hop() {
if (jumpHeight < 50) {
* = (jumpHeight++) + 'px';
} else {
jumpHeight = 0; // 重置高度
}
requestAnimationFrame(hop);
这下可算舒坦了！兔子能连跳还不带喘的，落地还加了点弹性效果，跟踩了弹簧床似的。不过写的时候手一抖把++写成--，结果兔子当场表演遁地术钻到屏幕底下去了，乐得我拍桌狂笑。
仨方案放一起遛
把三个兔子并排摆开跑测试：
- transition兔：老干部散步，跳一下歇三秒
- animation兔：广播体操标兵，动作标准但卡节奏
- JS兔：嗑了跳跳糖，蹦跶得根本停不下来
最绝的是在老旧平板跑，transition和animation的兔子直接变PPT，JS那只虽然也掉帧，但好歹是慢动作回放不是卡顿。
结论挺打脸的——以前我老吹嘘CSS动画省事，真搞起复杂交互还得靠JS。transition适合开关门这种简单活儿，keyframes做循环展示还行，但凡要带点交互逻辑的，写JS虽然多敲几行代码，但效果跟开拖拉机和跑车的区别似的。
对了，调完发现个坑：requestAnimationFrame在后台标签页会被限流，我挂着网页去吃个饭回来，兔子还在半空挂着！得补个visibilityState检测...算了改天再折腾，今天先拿这三个活宝凑合看。