如何利用css制作具有呼吸感的小球跳动动画_配合animation-timing-function-css教程-PHP中文网

呼吸感动画本质是用cubic-bezier(0.25,0.1,0.25,1.0)控制scale与translateY同步变化，通过压扁→拉伸的形变反馈模拟自然节奏，需注意iOS Safari对贝塞尔y值限于[0,1]及keyframes内不可设timing-function。

如何利用css制作具有呼吸感的小球跳动动画_配合animation-timing-function

呼吸感动画的本质是贝塞尔曲线的非匀速控制

所谓“呼吸感”，不是简单的上下平移，而是模拟物体自然膨胀收缩时的速度变化：起始缓慢加速，中间快速通过，末尾再缓慢减速。这恰好对应 cubic-bezier(0.25, 0.1, 0.25, 1.0) 这类缓入缓出曲线——它比默认的 ease 更柔和，比 ease-in-out 更有弹性余量。

直接用 ease-in-out 做小球跳动，容易显得机械僵硬；而用 linear 则完全失去呼吸节奏。关键在于让 scale 和 transform 同步受控于同一 timing function，否则缩放和位移不同步，就会像气球漏气一样失真。

小球跳动需同时驱动 scale + translateY 才不“飘”

只做 transform: translateY() 会像弹珠落地，缺少体积感；只做 scale 又像静态脉动。两者必须耦合，且偏移量与缩放比例要成合理反比：下落时略放大+下沉，回弹时略缩小+上升，才能模拟重力下的形变反馈。

推荐基础位移范围：从 translateY(0) 下落到 translateY(20px)，再回弹到 translateY(-5px)（轻微过冲）
对应缩放：从 scale(1) → scale(1.08)（压扁）→ scale(0.95)（拉伸回弹）
动画时长建议 0.6s–0.8s，太短像抽搐，太长失去节奏感

animation-timing-function 要写在 keyframes 内部而非 animation 简写中

很多人把 animation: bounce 0.7s ease-in-out 写在元素上，以为就控制了全程节奏——其实这只影响整个动画周期的播放速度，对每一帧的插值无直接影响。真正决定“呼吸起伏形状”的，是 @keyframes 内每个 step 的 animation-timing-function，或者更稳妥地，用单个 cubic-bezier 全程控制。

正确写法是：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

@keyframes breathe-bounce {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(20px) scale(1.08);
  }
  100% {
    transform: translateY(-5px) scale(0.95);
  }
}
.ball {
  animation: breathe-bounce 0.7s cubic-bezier(0.25, 0.1, 0.25, 1.0) infinite;
}

注意：不要在 50% 或 100% 单独加 animation-timing-function，CSS 不支持 keyframe-level timing；必须统一写在 animation 属性里。

移动端 Safari 对 cubic-bezier 支持有隐性限制

iOS 15.4 之前，Safari 对四参数 cubic-bezier() 的 y 值超过 [0, 1] 区间（比如写成 cubic-bezier(0.25, -0.1, 0.25, 1.2)）会静默降级为 linear，导致呼吸感消失。这不是 bug，是规范要求——但很多教程示例用了超界值，一粘贴到 iOS 就失效。