opacity过渡需配合transition声明在初始状态元素上，值必须为0–1数字，避免布局属性干扰，注意图层合成与浏览器兼容性。
opacity 过渡必须配合 transition 才生效
单独写 opacity: 0.5 不会动，CSS 不会自动“动起来”。必须显式声明过渡行为：transition: opacity 0.3s ease。这个声明要加在**初始状态元素上**（比如默认显示的元素），否则鼠标移入时第一次没过渡效果。
常见错误是只在 :hover 里写 transition，这没用——浏览器需要知道“从什么时候开始过渡”，所以过渡声明得放在常态规则里。
opacity 值必须是数字，不能用百分比或关键词
opacity 只接受 0 到 1 之间的数字（含小数），比如 opacity: 0、opacity: 0.75、opacity: 1。写成 opacity: 50% 或 opacity: transparent 都无效，后者甚至会导致过渡中断或回退到默认值。
-
transparent是background-color的取值，不是opacity的合法值 - 想实现“完全透明→半透明→不透明”，就老老实实写
0 → 0.5 → 1 - 动画中若用 JavaScript 动态设置，也要确保传的是数字，比如
el.style.opacity = 0.3，而不是字符串"0.3"（虽然多数浏览器会隐式转换，但不保险）
opacity 过渡可能引发重绘性能问题
opacity 变化本身属于合成属性（composited property），现代浏览器通常能走 GPU 合成，性能较好。但前提是该元素**已建立独立图层**。如果它被父容器裁剪（如 overflow: hidden）、或有 transform: none 等干扰，可能降级为全量重绘。
立即学习“前端免费学习笔记（深入）”；
稳妥做法是主动触发合成层：
- 加
will-change: opacity（仅在需要时启用，别滥用） - 或用
transform: translateZ(0)（兼容性更好，但略重） - 避免在
opacity过渡的同时频繁修改height、margin等触发布局的属性
IE 和旧版 Safari 对 opacity 过渡支持不一致
IE10+ 支持 transition + opacity，但 IE9 及更早版本完全不支持 transition，且 opacity 需用 filter: alpha(opacity=50)（已废弃）。Safari 6.1–9.0 在某些嵌套场景下会出现过渡卡顿或跳变。
如果必须兼容老环境：
- 放弃 CSS 过渡，改用 JavaScript 库（如 GSAP）或
requestAnimationFrame手动插值 - 用
@supports (transition: opacity 0.1s)做特性检测，优雅降级 - 注意：移动端 iOS Safari 9.3+ 基本没问题，但微信内置浏览器（X5 内核）某些版本仍有渲染 bug，建议加
backface-visibility: hidden辅助修复
display: none 切换为 block 就立刻触发 opacity 变化，过渡大概率失效——得先让浏览器完成一次 layout，再设 opacity，或者改用 visibility: hidden + opacity 组合控制。 
