自然跳动需用 cubic-bezier(0.2, 0.8, 0.4, 1.2) 实现过冲回弹，配合 scale(1.1)、0.3s–0.4s 动画时长、animation-fill-mode: forwards 防抽搐，并通过 @media (hover: hover) 兼容触屏。

用 animation + cubic-bezier() 实现自然跳动

纯 CSS 悬停跳动，关键不在“动”，而在“像弹起来又落下”——这靠 animation-timing-function 控制加速度。默认的 ease 或 linear 都太匀速，没弹性；真正跳动感需要先快后慢再微回弹，cubic-bezier(0.2, 0.8, 0.4, 1.2) 是个稳妥起点。

• 别用 steps() 或 ease-in-out：前者卡顿，后者顶多算“晃”，不是“跳”
• transform: scale(1.1) 比 translateY(-5px) 更安全：避免触发重排，且视觉反馈更直观
• 动画时长建议 0.3s–0.4s：短于 0.25s 显突兀，长于 0.5s 就拖沓，用户会误判交互响应

:hover 触发跳动但反复进出抖动？加 animation-fill-mode

鼠标快速划过图标时，animation 可能被中断重置，导致跳一半又缩回去，看起来抽搐。根本原因是动画未保留在结束状态。

• 必须设 animation-fill-mode: forwards，否则悬停结束瞬间就回退到初始 scale(1)
• 同时给非悬停态加 animation: none 或明确设为 animation: jump 0s，防止浏览器缓存上一次动画状态
• 如果父容器有 overflow: hidden，跳动时 scale(1.1) 可能被裁剪，此时改用 transform-origin: center 并预留微量内边距

图标字体（如 Font Awesome）跳动错位？注意 vertical-align 和行高

用 <i class="fa-solid fa-heart"></i> 这类图标字体时，悬停放大常导致文字基线偏移，上下“跳帧”而非平滑跳动。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给图标元素加 vertical-align: middle 或 vertical-align: -0.125em（Font Awesome 推荐值），对齐文本流
• 父容器若设了 line-height，需确保其值 ≥ 放大后的图标高度，否则会挤压行盒引发跳动
• 更稳方案：改用 SVG 图标并内联，用 width/height 替代 font-size，彻底脱离字体渲染影响

移动端点击无反应？补 @media (hover: hover) 判断

在 iOS Safari 或 Android Chrome 上，:hover 在触摸设备可能不触发，或只在首次点击后生效，导致跳动特效失效。

立即学习“前端免费学习笔记（深入）”；

• 用媒体查询隔离：仅在支持悬停的设备上启用动画：

  @media (hover: hover) { .icon:hover { animation: jump 0.35s cubic-bezier(0.2, 0.8, 0.4, 1.2) forwards; } }

• 不要依赖 touchstart JS 模拟：CSS 动画在触摸设备上仍可能因合成层未启用而掉帧
• 真要兼容触屏点击反馈，改用 :active 配合 scale(0.95) 压感，和悬停跳动区分开逻辑

跳动特效最易被忽略的是 timing-function 的取值精度——cubic-bezier(0.2, 0.8, 0.4, 1.2) 中最后一个参数大于 1，意味着“过冲”，这是弹跳感的物理基础；调成 1.0 就只是普通缓出，差的就是那一点回弹余味。