跳动动画必须用@keyframes显式定义至少四帧（0%/25%/50%/75%/100%）实现下压→回弹→过冲→回稳，禁用冲突transition，hover时启用ease-out动画并设will-change:transform，触屏改用focus或JS触发。
用 @keyframes 定义跳动动画帧
跳动本质是垂直方向的快速位移循环，不能靠 animation-timing-function 模拟——缓动函数无法产生“顿挫感”。必须用 @keyframes 显式控制每个关键帧的位置和时间点。
常见错误是只写两帧（比如 0% 和 100% 都设 transform: translateY(0)），结果变成平滑上下浮动。真正跳动需要至少三帧：下压 → 回弹 → 轻微过冲 → 回稳。
@keyframes jump {
0% {
transform: translateY(0);
}
25% {
transform: translateY(12px); /* 向下压 */
}
50% {
transform: translateY(-6px); /* 快速回弹，略高于起点 */
}
75% {
transform: translateY(2px); /* 微调，模拟惯性衰减 */
}
100% {
transform: translateY(0);
}
}悬停触发时启用 animation 并禁用 transition 冲突
如果元素本身有 transition（比如 hover 时改颜色或缩放），它会和 animation 竞争 transform 层级，导致跳动卡顿甚至失效。必须在 hover 状态中显式关闭相关 transition。
- 只对
transform做动画，其他属性（如color、opacity）单独加 transition 且不冲突 - hover 选择器里写
animation: jump 0.4s ease-out;，别漏掉ease-out—— 默认ease在末尾减速不够，跳动收不住 - 确保非 hover 状态下
animation: none;或直接不声明，避免初始闪动
防止 layout shift 和父容器抖动
用 transform: translateY() 本身不会触发重排（re-layout），但若父元素设置了 overflow: hidden 或高度固定，跳动超出范围会被裁剪，看起来像“卡住”。更隐蔽的问题是：元素有边框/阴影时，跳动过程中 box-shadow 的渲染可能引发轻微重绘抖动。
立即学习“前端免费学习笔记（深入）”；
- 给跳动元素加
will-change: transform;（仅 hover 时加，避免常驻损耗） - 父容器设置
overflow: visible;，确保跳动空间充足 - 避免同时对同一元素设置
transform和top/left等定位属性，它们会合并计算，破坏动画精度
移动端 hover 不生效？改用 focus-within 或 JS 模拟
CSS :hover 在多数触摸设备上不可靠——没有持续悬停概念。真要支持触屏，得换触发方式：
- 对按钮类元素，用
:focus+tabindex="0"，再配合键盘操作 - 更稳妥的是监听
touchstart，动态加 class：element.classList.add('is-jumping')，然后用.is-jumping { animation: jump 0.4s ease-out; } - 别依赖
:active做跳动——它只在按下的瞬间触发，松手就停，不是“悬停”效果
跳动动画的节奏感全靠关键帧的时间占比和位移数值微调，0.1s 的延迟或 1px 的偏移差，都会让效果从“活泼”变“抽搐”。先跑通再调参，别一上来就堆 fancy timing function。
