CSS变量无法直接存储cubic-bezier()函数，因其仅作字符串替换而不解析为合法缓动语法；应改用@keyframes绑定贝塞尔曲线后通过animation简写变量调用，或用类名控制具体值。
cubic-bezier() 不能直接存进 CSS 变量里——你写 --ease-bounce: cubic-bezier(0.17, 0.89, 0.32, 1.28);，后续用 transition-timing-function: var(--ease-bounce); 是无效的。 浏览器不支持把函数调用作为自定义属性值解析，它只会当字符串处理，而 transition-timing-function 不接受字符串字面量。
为什么 var(--ease) 无法直接用于 transition-timing-function
CSS 变量本质是“字符串替换”，不是运行时求值。即使你存了 cubic-bezier(0.17, 0.89, 0.32, 1.28)，var(--ease) 展开后仍是纯文本，浏览器不会把它识别为合法的缓动函数语法。这和 calc() 或 url() 不同，后者有明确的解析上下文；cubic-bezier() 必须在声明值位置原生书写。
- DevTools 会报 warning：“Invalid property value” 或静默降级为
ease - Chrome 动画检查器里看到的曲线图会是一条直线（说明没生效）
- Firefox 和 Safari 行为一致：不解析、不报错、不警告，只回退
真正可用的变量化方案：用 animation 简写 + 自定义动画名
绕过变量不能存函数的限制，把贝塞尔曲线绑定到命名动画上，再用变量控制动画名——这是目前最稳定、兼容性最好（Chrome 43+/Safari 9+/Firefox 16+）的做法。
- 先定义带
cubic-bezier()的@keyframes，哪怕只是空动画（只设animation-timing-function）：@keyframes ease-bounce { 0% { opacity: 0.99; } /* 防止被优化掉 */ 100% { opacity: 1; } } - 用变量存动画名：
:root { --anim-ease: ease-bounce 0.6s cubic-bezier(0.17, 0.89, 0.32, 1.28) forwards; } - 应用时直接展开：
.element { animation: var(--anim-ease); } - 注意：必须写全
animation简写（含时长、函数、填充等），不能只写名字
transition 场景下怎么复用？用类名 + 属性覆盖
如果你主要用 transition（比如 hover 动效），没法靠 animation 简写变量，就得换思路：把贝塞尔曲线写死在类里，用变量控制是否启用。
立即学习“前端免费学习笔记（深入）”；
- 定义基础过渡类：
.transition-bounce { transition-property: transform, opacity; transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } - 用变量开关行为（比如配合 JS 切换主题或模式）：
:root { --use-bounce: 1; } .transition-bounce[data-bounce="on"] { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } /* 或用 JS 动态加 class，比操作 style 更可靠 */ - 避免用
transition: all+ 变量，因为all会触发重排，且无法精细控制哪些属性走哪个缓动
容易被忽略的兼容性细节
即便你绕过了变量限制，y 值越界（如 1.28）在旧版 Safari（≤15.6）或 Android WebView（Chrome ≤105）里仍可能被静默截断为 1，导致“回弹”变“缓出”。这不是变量的问题，而是贝塞尔本身解析差异。
- 真要跨端保效果，优先测试
y1和y2是否 ≤ 1.3，x 值严格保持在 [0, 1] 内 - 用
will-change: transform配合，能减少因 y 越界引发的渲染抖动 - 不要依赖在线生成器默认输出的“夸张值”，比如
cubic-bezier(0.5, 1.5, 0.5, -0.5)在 iOS 16 以下基本失效
变量不能存函数，这是 CSS 引擎的底层限制，不是写法问题。想复用贝塞尔曲线，核心就两条：要么绑定到 @keyframes 名称上走 animation 简写变量，要么放弃变量、用 class 控制具体值——别在 transition-timing-function: var(--x) 上浪费调试时间。
