通过调整 CSS 渐变方向与遮罩起始位置，可精准控制图像遮罩动画的展开方向；仅修改 linear-gradient(to left) 不足，还需设置 -webkit-mask-position: right 才能真正实现从右向左的渐显效果。
通过调整 css 渐变方向与遮罩起始位置，可精准控制图像遮罩动画的展开方向；仅修改 `linear-gradient(to left)` 不足，还需设置 `-webkit-mask-position: right` 才能真正实现从右向左的渐显效果。
在 Web 动画中，使用 CSS 遮罩（-webkit-mask-image）配合 @keyframes 实现图像“逐次显现”效果是一种轻量且高性能的方案。但许多开发者会误以为只需更改 linear-gradient 的方向（如 to left）就能反转动画方向——实际上，渐变方向定义的是遮罩颜色的分布逻辑，而遮罩的初始可见区域由 mask-position（或 -webkit-mask-position）决定。
要实现“图像从右向左逐步 uncovered（揭开）”，关键在于两点协同：
- 遮罩渐变方向设为 to left：使不透明部分（rgba(0,0,0,1)）起始于右侧，透明部分（rgba(0,0,0,0)）延伸至左侧；
- 遮罩初始位置设为 right：确保动画起始时，遮罩的“有效区域”（即不透明部分）完全位于图像右侧之外，随着 mask-size 从 0% 增至 100%，不透明区向左扩展，从而视觉上呈现“从右向左展开”的效果。
以下是完整、可直接运行的示例代码：
<div class="fade-in-img-2">
@@##@@
</div>
<style>
.fade-in-img-2 {
animation: right-to-left-uncover 1s ease-in;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: right; /* ✅ 关键：锚定遮罩右侧 */
mask-repeat: no-repeat;
mask-position: right; /* 标准语法，兼顾现代浏览器 */
display: flex;
justify-content: center;
}
.fade-in-img-2 .fade-img-2 {
width: 60%;
display: block;
}
@keyframes right-to-left-uncover {
0% {
-webkit-mask-size: 0%;
mask-size: 0%;
-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)
);
}
100% {
-webkit-mask-size: 100%;
mask-size: 100%;
-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)
);
}
}
</style>
⚠️ 注意事项：
- -webkit-mask-* 是 Safari 和旧版 Chrome 的私有前缀，*必须搭配标准属性 `mask-` 使用**以保障跨浏览器兼容性（现代 Chromium 已支持标准语法，但仍建议双写）；
- mask-position: right 等价于 mask-position: 100% 50%，确保遮罩基准点对齐图像右侧中心；
- 若需更精细控制（如从右上角斜向展开），可改用 conic-gradient 或组合 mask-size 与 mask-position 的动态变化；
- 该技术依赖浏览器对 CSS Masking Level 1 的支持（CanIUse 数据显示：Chrome ≥ 1, Safari ≥ 4, Firefox ≥ 53（需启用 layout.css.masking.enabled））。
总结：CSS 遮罩动画的方向控制是「渐变方向 + 位置锚点 + 尺寸变化」三者共同作用的结果。理解 mask-position 的定位语义，远比单纯调换 to left/right 更重要——这是实现任意方向图像揭示效果的核心原理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
