opacity仅支持整体淡入淡出，无法实现方向性渐变；正确方案是用mask-image+linear-gradient，如mask-image: linear-gradient(to right, black, transparent)。
opacity + transition 只能做整体淡入淡出，不是“方向性渐变”
很多人搜“透明度渐变”，其实是想做出「左边不透明、右边逐渐变透明」这种效果。但 opacity 本身不支持方向控制——它作用于整个元素及其子树，只能全局变亮或变暗。
直接写 transition: opacity 0.3s，再配合 :hover 或 class 切换，只能实现从 1 → 0.2 这样的匀速整体变淡，不是渐变；强行用 opacity 模拟方向效果，要么错位，要么遮挡异常。
- ✅ 正确用途：按钮悬停变灰、模态框淡入、图片切换过渡
- ❌ 错误期待：用
opacity实现“左半边可见、右半边消失”的线性遮罩效果 - ⚠️ 注意：
opacity: 0后元素仍占布局空间、仍响应鼠标事件，需额外加pointer-events: none或后续用 JS 切换display: none
真要“从左到右透明”，得用 mask-image + linear-gradient
现代浏览器（Chrome 112+、Firefox 111+、Safari 16.4+）支持 mask-image，这才是实现方向性透明渐变的正解。原理是：用一个黑白渐变图当“遮罩”，黑色区域显示、透明区域隐藏。
关键写法：
立即学习“前端免费学习笔记（深入）”；
.fade-right {
mask-image: linear-gradient(to right, black, transparent);
mask-size: 100% 100%;
mask-repeat: no-repeat;
}
-
to right表示渐变方向：左黑 → 右透 → 元素右侧逐渐不可见 - 必须配
mask-size: 100% 100%，否则默认平铺，整块花掉 - 旧浏览器不支持？降级方案是用伪元素叠加一层半透明
::after，从左往右线性覆盖背景色
@keyframes 控制 opacity 动画节奏，比 transition 更灵活
如果目标是「先慢后快再慢地淡入，停顿 1 秒，再淡出」这类多阶段变化，transition 不够用，必须上 @keyframes。
例如呼吸式闪烁：
@keyframes breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.element { animation: breathe 2.4s ease-in-out infinite; }
-
ease-in-out比linear更接近自然呼吸节奏 - 想让动画结束后保持最后一帧？加
animation-fill-mode: forwards - 频繁动画（比如轮播图）建议加
will-change: opacity提前升层，但别滥用——只对真正滚动/交互动画的元素设
opacity 动画性能好，但别和 layout 触发器混用
opacity 是 CSS 中少数能走 GPU 合成的属性，单独动画基本不卡。但一不小心就掉帧：
- ❌ 错误组合：在同一个元素上同时动画
opacity和height——height触发重排，拖垮整个动画 - ✅ 正确替代：用
transform: scaleY()替代height动画，两者都走合成层 - ⚠️ 隐藏陷阱：父容器有
filter（如 blur）、或元素本身带box-shadow且阴影范围大，也会显著增加绘制开销
方向性透明渐变最容易被当成 opacity 问题来解，结果调半天发现根本不是同一类机制——mask 才是钥匙，别在 transition 上死磕。
