通过组合使用 -webkit-mask-image 渐变方向与 -webkit-mask-position 初始定位，可精准控制图像遮罩动画的展开方向，仅修改 linear-gradient(to left) 不足以反转动画，必须同步设置 mask-position: right。
通过组合使用 `-webkit-mask-image` 渐变方向与 `-webkit-mask-position` 初始定位，可精准控制图像遮罩动画的展开方向，仅修改 `linear-gradient(to left)` 不足以反转动画，必须同步设置 `mask-position: right`。
在 CSS 中实现图像“从右向左渐显”效果，本质是利用 CSS 遮罩（mask） 控制可见区域随时间动态扩展。许多开发者误以为仅将 linear-gradient(to right) 改为 to left 即可反转动画方向，但实际效果未变——这是因为：渐变方向定义的是颜色过渡走向，而遮罩的起始显示位置由 mask-position 决定。若不显式指定初始位置，浏览器默认以 center 对齐，导致无论渐变朝向如何，遮罩始终从中部“生长”，无法体现左右方向性。
✅ 正确做法需三要素协同：
- ✅ mask-image 使用 linear-gradient(to left, ...) 定义右侧为不透明、左侧为透明的遮罩形状；
- ✅ mask-position: right 确保遮罩初始时完全覆盖图像右侧，仅露出最右边缘（或完全隐藏，取决于尺寸）；
- ✅ mask-size 从 0% 动态增至 100%，使遮罩区域向左扩展，从而“揭开”图像。
以下是完整、跨浏览器兼容性更优的实现（已补充标准属性并保留 WebKit 前缀）：
.fade-in-img-2 {
animation: right-to-left-uncover 1s ease-in;
/* 关键：初始遮罩锚点设为右侧 */
-webkit-mask-position: right;
mask-position: right;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
display: flex;
justify-content: center;
}
.fade-in-img-2 .fade-img-2 {
width: 60%;
/* 启用遮罩作用于 img 元素 */
-webkit-mask-image: linear-gradient(
to left,
rgba(0, 0, 0, 1) 70%,
rgba(0, 0, 0, 0)
);
mask-image: linear-gradient(
to left,
rgba(0, 0, 0, 1) 70%,
rgba(0, 0, 0, 0)
);
}
@keyframes right-to-left-uncover {
0% {
-webkit-mask-size: 0% 100%;
mask-size: 0% 100%;
}
100% {
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
}
<div class="fade-in-img-2"> @@##@@ </div>
⚠️ 注意事项：
- mask-size 推荐显式声明为 width height（如 0% 100%），避免因默认行为差异导致高度塌陷；
- 当前方案依赖 -webkit-mask-*，现代 Chrome/Firefox/Safari 已支持无前缀 mask-*，但为兼容旧版 Safari，建议保留前缀；
- 若需更精细控制（如非线性缓动、暂停交互），可结合 animation-timing-function 或 JS 控制 animation-play-state；
- 替代方案（如 clip-path）虽语义清晰，但在动画性能与浏览器支持上略逊于 mask，尤其对复杂路径。
总结：CSS 遮罩动画的方向感 ≠ 渐变方向，而是渐变方向 + 初始定位 + 尺寸变化三者共同决定。掌握这一逻辑，即可自由实现左→右、右→左、上→下、下→上等任意单向揭示效果，为 UI 动效设计提供强大可控性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
