本文详解如何通过 WebKit 掩码（-webkit-mask）配合 linear-gradient 和 mask-position，精准控制图像遮罩动画方向，解决仅修改渐变方向无效的问题，实现真正从右向左的“揭开式”显示效果。
本文详解如何通过 webkit 掩码（`-webkit-mask`）配合 `linear-gradient` 和 `mask-position`，精准控制图像遮罩动画方向，解决仅修改渐变方向无效的问题，实现真正从右向左的“揭开式”显示效果。
在 CSS 动画中，仅靠修改 linear-gradient(to left) 并不能自动反转掩码动画的起始位置——因为渐变方向定义的是颜色过渡走向，而掩码的可见区域起始点由 -webkit-mask-position 决定。默认值为 left top，即掩码图像（此处是渐变）的左上角对齐元素左上角。因此，即使你将渐变设为 to left，若未调整 mask-position，掩码仍从左侧开始展开，视觉上仍是“左→右”显现。
要实现从右向左“揭开”图像的效果，需同时满足两个条件：
- 渐变方向设为 to left：确保不透明部分（rgba(0,0,0,1)）位于右侧，透明部分（rgba(0,0,0,0)）向左延伸；
- 掩码定位设为 right：使渐变的“高光起点”（即 70% 不透明区）初始对齐容器右侧边缘，再随 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; /* ✅ 关键：锚定掩码右侧 */
-webkit-mask-size: 0%; /* 初始隐藏全部 */
display: flex;
justify-content: center;
}
.fade-in-img-2 .fade-img-2 {
width: 60%;
/* 确保图片能被掩码作用（需设置宽高或 display:block） */
display: block;
}
@keyframes right-to-left-uncover {
0% {
-webkit-mask-size: 0%;
-webkit-mask-image: linear-gradient(
to left, /* ✅ 渐变向左：右侧实心，左侧透明 */
rgba(0, 0, 0, 1) 70%,
rgba(0, 0, 0, 0)
);
}
100% {
-webkit-mask-size: 100%;
-webkit-mask-image: linear-gradient(
to left,
rgba(0, 0, 0, 1) 70%,
rgba(0, 0, 0, 0)
);
}
}
</style>
⚠️ 注意事项：
- -webkit-mask-* 属于实验性前缀属性，目前主要支持 Chrome、Safari 和 Edge（基于 Chromium）。如需更广泛兼容，建议搭配 @supports (-webkit-mask-image: ...) 进行特性检测，或使用 clip-path + transform 作为降级方案；
- mask-position: right 等价于 mask-position: 100% 50%，确保水平方向对齐右侧；
- 图片需有明确尺寸（如 width 或 height），否则掩码可能失效；
- 若使用标准 mask-image（无前缀），请同步添加 mask-position 和 mask-size，并注意浏览器支持度。
✅ 总结：CSS 掩码动画的方向控制 = 渐变方向（to left/right） + 掩码定位（mask-position） + 尺寸变化（mask-size） 三者协同。忽略任一环节，都可能导致动画“不按预期反转”。掌握这一组合逻辑，你就能灵活实现任意方向的图像揭示、擦除、滑入等高级视觉效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
