用 scaleY 配合 @keyframes 实现纵向呼吸式律动动效，关键在于缓入缓出、中间停顿、小幅回弹与余韵设计，并通过时序参数、防模糊处理及轻量辅助效果提升自然感。
直接用 scaleY 配合 @keyframes 做纵向缩放动效，关键在控制节奏感——不是匀速拉伸，而是模拟呼吸或弹性回弹的“律动”，重点在于缓入缓出 + 中间留白 + 小幅震荡。
1. 定义带停顿与弹性的关键帧
避免线性变化。比如让标题先缓慢拉长（0% → 70%），在最长处短暂停顿（70% → 85%），再轻快回弹一点（85% → 100%），制造“呼—吸—微颤”的节奏：
@keyframes scaleYPulse {
0% { transform: scaleY(1); }
70% { transform: scaleY(1.12); }
85% { transform: scaleY(1.12); } /* 暂停，强化节奏锚点 */
100% { transform: scaleY(1.04); } /* 不完全复位，留余韵 */
}
2. 应用动画并调优时序参数
用 animation 简写一次性设置，重点调三个值：
- 持续时间：1.8s–2.4s 较易感知节奏，太快像抖动，太慢显迟滞
-
缓动函数：推荐
cubic-bezier(0.34, 1.56, 0.64, 1)—— 入口柔和、中段稍快、收尾带轻微过冲再回弹 -
播放方式：加
infinite alternate实现来回律动，比单纯循环更自然
3. 防止文字模糊与布局跳动
纵向缩放容易引发字体渲染发虚或容器高度抖动，需主动约束：
立即学习“前端免费学习笔记（深入）”；
- 给标题父容器设固定
height或min-height，避免上下撑开 - 添加
transform-origin: center;确保缩放以中线为轴，不偏移 - 启用硬件加速：
transform: scaleY(...) translateZ(0);提升渲染精度
4. 按需叠加轻量级辅助效果（可选）
纯 scaleY 容易单调，可微量增强律动感：
- 在峰值帧（如 70%）同步加
opacity: 0.96，模拟光影起伏 - 配合极小幅度的
translateY(-1px)，强化“上浮”错觉 - 慎用旋转——哪怕 0.3deg 也易破坏标题稳重感
基本上就这些。节奏感不在动得多，而在停得巧、变得柔、收得稳。
