呼吸感动画本质是用cubic-bezier(0.25,0.1,0.25,1.0)控制scale与translateY同步变化，通过压扁→拉伸的形变反馈模拟自然节奏，需注意iOS Safari对贝塞尔y值限于[0,1]及keyframes内不可设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 全程控制。
立即学习“前端免费学习笔记（深入）”；
正确写法是：
@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 就失效。
- 安全做法：y1/y2 始终控制在 0–1 之间，如
cubic-bezier(0.25, 0.05, 0.25, 0.95) - 若需更强弹性，改用多段 keyframe + 不同 timing 分段控制，而非强求单条超界曲线
- 测试时务必真机打开 Safari，DevTools 模拟器不反映该限制
呼吸感的难点不在写几行 animation，而在缩放/位移的幅度配比、timing curve 的 y 值边界、以及 Safari 下的兼容收敛——调参时盯着小球看三秒，晃眼就是失败。
