用 scaley 实现频谱跳动的核心是：设 transform-origin: bottom，用 ease-in-out 的 scaley 缩放动画配合错开的 animation-delay（0.05s–0.15s），避免 height 动画与布局重排。
用 scaleY 实现频谱柱状条跳动的核心逻辑
频谱动画本质是多个柱子（div）在垂直方向上按不同节奏缩放，靠 scaleY 驱动高度变化，再用 animation-delay 错开播放时机。关键不是“怎么动”，而是“怎么让它们看起来像在响应音频”——实际项目中你几乎不会实时绑定音频数据，而是用预设的、有呼吸感的循环动画模拟这种效果。
要点：
-
transform: scaleY(0)会让元素视觉上“消失”，但保留占位（除非同时设transform-origin: bottom否则缩放中心在中间，会向上塌陷） - 必须设
transform-origin: bottom，否则柱子会从中心缩放，顶部乱飘 - 动画时长建议统一为
1s或1.2s，太短显得机械，太长失去节奏感 - 不要用
height动画——重排版开销大，且无法 GPU 加速；scaleY是纯合成层操作
写一组带 delay 差值的柱子动画（纯 CSS）
假设你要 8 根柱子，每根宽度固定，用 :nth-child(n) 批量控制 animation-delay。差值不宜过大，0.05s–0.15s 区间最自然，超过 0.2s 就容易断节奏。
.bar {
width: 6px;
background: #4ade80;
border-radius: 3px;
transform-origin: bottom;
animation: pulse 1s ease-in-out infinite;
}
.bar:nth-child(1) { animation-delay: 0s; }
.bar:nth-child(2) { animation-delay: 0.08s; }
.bar:nth-child(3) { animation-delay: 0.16s; }
.bar:nth-child(4) { animation-delay: 0.1s; }
.bar:nth-child(5) { animation-delay: 0.04s; }
.bar:nth-child(6) { animation-delay: 0.12s; }
.bar:nth-child(7) { animation-delay: 0.06s; }
.bar:nth-child(8) { animation-delay: 0.14s; }
@keyframes pulse {
0%, 100% { transform: scaleY(0.1); }
50% { transform: scaleY(1.2); }
}
注意：上面 delay 值故意不严格递增，模拟真实频谱的“不规则活跃感”。如果全按等差排列，反而像机械节拍器。
为什么 ease-in-out 比 linear 更像频谱
真实声音能量上升快、衰减慢，ease-in-out 的缓入缓出恰好匹配这种物理特性；而 linear 会让柱子像被提线木偶拽着上下，生硬且缺乏弹性。
更进一步可微调贝塞尔曲线：
- 用
cubic-bezier(0.3, 0.8, 0.5, 1)加强上升段爆发感 - 避免
cubic-bezier(0.1, 0.9, 0.2, 1)这类极端值，会导致动画卡顿或跳帧（尤其低端设备） - 移动端务必加
will-change: transform到柱子上，触发硬件加速（但别滥用，仅对动画元素加）
常见翻车点：父容器溢出、Flex 对齐错位、动画卡顿
三个高频问题，一碰就废：
- 父容器没设
overflow: hidden→ 柱子scaleY(1.2)时顶出容器，布局炸开 - 柱子用
display: flex排列但没设align-items: flex-end→ 所有柱子默认居中对齐，底部不齐，频谱像斜坡 - Chrome 中动画掉帧 → 检查是否误写了
transform: scaleY(...) translateZ(0)，translateZ(0)在新版 Chrome 已非必需，反而可能触发多余图层合成 - 想兼容 Safari？把
@keyframes里transform拆成-webkit-transform+ 标准写法，但 iOS 16+ 基本不用了
真正难的不是写出动画，是让 8 根柱子在各种屏幕密度、缩放比例、后台标签页切换后，依然保持节奏一致——这需要反复在真机上切后台再切回来测试，CSS 动画没有“音频同步锚点”，全靠人耳校准 delay 差值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
