正弦动画需用cubic-bezier()模拟或SCSS预生成关键帧；CSS不支持运行时sin()，Dart Sass的math.sin()可在编译期计算，推荐cubic-bezier(0.3,0,0.7,1)轻量模拟正弦节奏。
正弦动画的核心是 transform + 自定义贝塞尔曲线
纯 CSS 无法直接调用 sin() 函数，所以不能“计算正弦值”，但可以用 animation-timing-function 模拟正弦波的节奏——关键在于用 cubic-bezier() 近似正弦函数在 [0,1] 区间的一段单调上升+下降周期（比如 0→π→2π 的位移投影）。SCSS 的作用是帮你批量生成这些贝塞尔控制点，而不是运行时算 sin。
常见错误是试图在 @keyframes 里写 transform: translateY(sin($i * 0.1) * 20px) ——这会报错，因为 CSS 不支持数学函数调用，SCSS 编译期也无法访问运行时时间变量。
- 真正可行路径：用 SCSS 循环生成多帧
keyframes动画，每帧对应一个预计算的正弦采样点（如 0°~360° 分 24 步） - 更轻量做法：只用一个
@keyframes，配合cubic-bezier(0.25, 0.1, 0.25, 0.9)模拟半个正弦周期，再用animation-direction: alternate补全 - 注意：CSS 的贝塞尔函数输入是时间归一化 [0,1]，输出是属性归一化 [0,1]，需手动映射到你需要的像素/角度范围
用 SCSS 循环生成离散正弦帧动画
如果你需要精确控制波形（比如做波浪、呼吸灯、声波可视化），就得在编译时把正弦值打成关键帧。SCSS 的 math.sin()（Dart Sass 1.33+）或自定义函数可完成这事，但必须确保使用 Dart Sass（Node Sass 已废弃且不支持）。
@use "sass:math";
<p>@keyframes sine-wave {
@for $i from 0 through 24 {</p><h1>{percentage($i / 24)} {</h1><pre class="brush:php;toolbar:false;"> transform: translateY(
#{math.round(math.sin(math.div($i * math.pi() * 2, 24)) * 20)}px
);
}
} }
这段代码生成 25 帧，覆盖完整正弦周期（0→2π），振幅 ±20px。注意三点：
-
math.pi()必须小写，math.div()避免整数除法截断 - 输出值用
math.round()，否则可能产生小数像素导致模糊 - 若用旧版 LibSass，需手写近似函数（如
@function sin($x) { @return ($x - pow($x, 3)/6 + pow($x, 5)/120); }），但仅适用于小角度
用 cubic-bezier 模拟正弦节奏（推荐日常使用）
多数场景不需要 25 帧，一个平滑循环动画就够了。正弦函数在 [0, π] 区间形状接近 cubic-bezier(0.25, 0.1, 0.75, 0.9)，但标准正弦从 0 开始增速慢、中段快、末段又慢——更准的是 cubic-bezier(0.3, 0, 0.7, 1)。
实际用法示例：
.wobble {
animation: wobble 1.2s ease-in-out infinite;
}
<p>@keyframes wobble {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-16px); }
}</p><p>// 或直接用 timing function 控制线性位移：
.wave {
animation: move-y 2s cubic-bezier(0.3, 0, 0.7, 1) infinite;
}</p><p>@keyframes move-y {
to { transform: translateY(12px); }
}</p>
-
cubic-bezier(0.3, 0, 0.7, 1)比ease-in-out更接近正弦加速度变化 - 如果要“连续波动”而非单次起伏，别用
to关键字，改用0%, 50%, 100%显式定义顶点和谷底 - 动画周期设为质数（如 1.7s）可避免多元素同频共振，视觉更自然
兼容性与性能陷阱
所有方案都依赖 transform，所以必须确保元素启用了硬件加速（will-change: transform 或 transform: translateZ(0)），否则在低端设备上会掉帧。
- Dart Sass 的
math.sin()在编译时计算，无运行时开销，但旧构建工具链（如 Webpack 4 + sass-loader 10）可能默认用 Node Sass，需显式指定implementation: require('sass') - 超过 60 帧的手动生成动画会让 CSS 文件体积飙升，24 帧是平衡点
- 不要对
top/left做正弦动画——触发布局重排，卡顿明显；永远用transform: translateY() - 移动端 Safari 对
cubic-bezier()支持完好，但老 Android WebView（4.4）可能解析失败，建议加降级animation-timing-function: ease-in-out
真正难的不是写出正弦公式，而是判断该用离散帧还是贝塞尔模拟——前者可控但重，后者轻量但失真。选哪个，取决于你动画是否需要精确相位对齐或多波叠加。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
