推荐统一用 rgba/hsla 控制颜色与透明度，避免混用 color 和 opacity 导致跳变；精确声明 transition-property；慎用 opacity 以免影响子元素；高要求场景可用 @property 注册颜色变量实现精准插值。
直接同时用 transition 控制 color 和 opacity，浏览器会分别计算两个属性的插值路径，尤其当起始/结束状态中颜色含透明度（如 rgba(0,0,0,0.5)）而另一端是纯色（如 #333）时，容易出现颜色“跳变”或灰阶偏移，视觉上不连贯。
统一用 rgba/hsla 颜色模型控制透明度
避免混用关键字色、十六进制色与带 alpha 的 rgba/hsla。所有状态都显式声明 alpha 通道，让颜色过渡本质变成「四个通道（r,g,b,a）的线性插值」，过渡更可控。
- ❌ 不推荐：
color: #222; opacity: 0.8→color: #fff; opacity: 1 - ✅ 推荐：
color: rgba(34, 34, 34, 0.8);→color: rgba(255, 255, 255, 1); - 这样
opacity可完全弃用，仅靠color的 alpha 变化实现明暗+透明联合效果，transition 更干净
用 transition-property 精确指定需动画的属性
避免写 transition: all .3s ease，它会让所有可动画属性（包括可能未预期的 background-color、border）一起响应，干扰主视觉节奏。
- 明确只过渡颜色相关通道：
transition: color .3s ease; - 如果必须保留
opacity（比如影响子元素），则合并声明：transition: color .3s ease, opacity .3s ease; - 确保两个属性使用相同缓动函数和时长，否则步调不一致会显得“拖尾”或“抢前”
慎用 opacity：它影响整个元素及其子树
opacity 是合成层属性，设为小于 1 时不仅让自身半透，还会让所有后代元素按相同比例变淡，破坏局部色彩层次。若只需文字渐隐，优先用 color 的 alpha；若需整体淡入淡出且无子元素干扰，再考虑 opacity。
立即学习“前端免费学习笔记（深入）”；
- 例如按钮内有图标 + 文字，用
opacity会让图标也跟着变淡，而用color: rgba(...)只影响文字色 - 若确实要过渡容器整体，建议配合
will-change: opacity提前提示渲染引擎优化
必要时用 CSS 自定义属性 + @property 注册颜色类型
CSS Houdini 的 @property 可让自定义颜色变量支持插值（尤其解决 color 在不同格式间插值不准的问题），适合高要求场景：
- 在 :root 中注册：
@property --text-color { syntax: ""; inherits: false; initial-value: #333; } - 元素上使用：
color: var(--text-color); transition: --text-color .3s ease; - JS 或伪类切换：
.el:hover { --text-color: #fff; } - 注意兼容性：Chrome 110+ / Edge 110+ 支持，Safari 和 Firefox 暂未支持
