opacity不能实现透明颜色代码效果，它控制整个元素不透明度而非颜色alpha通道；真需颜色透明应使用rgba()或hsla()。
opacity 不能直接实现“透明颜色代码”效果，它控制的是整个元素的不透明度，不是某个颜色值的 alpha 通道。 想用 opacity 做淡入动画，关键不在“颜色代码”，而在正确触发和控制元素的透明度变化过程——否则容易卡顿、闪一下就结束，或影响子元素交互。
opacity 淡入必须配合 transition 或 animation 才生效
只写 opacity: 0 和 opacity: 1 不会动。浏览器不会自动补间，得明确告诉它“怎么变”和“变多久”。
-
transition更适合状态切换（比如 hover、JS 控制显隐） -
animation更适合独立循环或复杂时序（比如页面加载时自动淡入） - 必须给元素初始状态（如
opacity: 0），再通过 class 切换或 JS 修改触发动画
用 transition 实现点击淡入的可靠写法
这是最常用也最不容易出错的方式。避免在 :hover 上直接写 transition（可能反复触发），而是用 class 控制。
.fade-in-element {
opacity: 0;
transition: opacity 0.3s ease-out;
}
.fade-in-element.show {
opacity: 1;
}JS 触发只需：element.classList.add('show')。注意：不要用 display: none 配合 opacity，因为 display: none 会让元素脱离渲染流，transition 失效；改用 visibility: hidden + opacity: 0 组合更稳妥。
立即学习“前端免费学习笔记（深入）”；
opacity 动画的三个典型坑
这些错误会让淡入看起来“不对劲”：
- 父元素设置了
opacity: 0.8，导致所有子元素一起变淡——opacity是继承式透传的，无法单独控制子元素 - 用
opacity: 0后仍能点击/聚焦子元素（因为元素还在文档流里），需加pointer-events: none并在显示时恢复 - 在 Safari 或旧版 iOS WebView 中，
opacity动画偶尔掉帧，可加transform: translateZ(0)强制硬件加速（但别滥用，可能引发其他渲染问题）
真要“透明颜色代码”，该用 rgba() 或 hsla()
如果目标是让背景色或文字色带透明度，而不是整个盒子，就别碰 opacity。例如：
/* 背景半透，不影响子元素 */
.button {
background-color: rgba(0, 120, 255, 0.7);
}
/* 文字带透明度 */
.text-fade {
color: hsla(210, 100%, 50%, 0.6);
}这种写法不会影响子节点，也不需要额外动画控制——想淡入？照样用 transition: background-color 0.3s 或 transition: color 0.3s 即可。
opacity 淡入看着简单，真正卡住人的往往是过渡时机没对上、初始状态漏设、或者误以为它能局部生效。把元素初始态、触发方式、过渡属性这三者串清楚，比记颜色代码重要得多。
