本文详解如何通过 WebKit 遮罩（-webkit-mask）配合 linear-gradient 和 mask-position 控制图片动画方向，解决仅修改渐变方向却无法反转动画的问题。
本文详解如何通过 webkit 遮罩（`-webkit-mask`）配合 `linear-gradient` 和 `mask-position` 控制图片动画方向，解决仅修改渐变方向却无法反转动画的问题。
在 CSS 中实现“图片从右向左逐渐显现”的动画效果，常被误认为只需将 linear-gradient(to right) 改为 to left 即可。但实际中，渐变方向仅决定遮罩图像的色彩过渡朝向，而动画的起始位置由 mask-position（或 -webkit-mask-position）控制。若忽略该属性，即使渐变方向已反转，遮罩区域仍默认从左侧开始扩展，导致视觉上动画方向未改变。
正确做法是：同时调整两个关键属性：
-
mask-image的渐变方向（如to left），定义遮罩的透明度分布； -
mask-position设置为right，确保遮罩初始时完全覆盖图像右侧，随mask-size从0%增至100%时，透明区域从右向左展开。
以下是完整、可直接运行的示例代码：
<div class="fade-in-img-2">
<img class="fade-img-2" src="https://picsum.photos/200/300" alt="示例图片">
</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%;
}
@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%;
/* mask-image 可保持不变，因 size 扩展即实现“滑入”效果 */
}
}
</style>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
-
浏览器兼容性：
mask属性在 Safari 和 Chrome 中需-webkit-前缀；Firefox 当前不支持mask-image（仅支持 SVG masks），生产环境建议添加降级方案（如opacity+transform模拟）。 -
mask-position必须显式声明：默认值为center，会导致遮罩居中展开，而非贴边滑动。 -
渐变色标比例（如
70%）影响“硬边”位置：数值越大，不透明区域越宽，动画结束时保留更多原始图像细节；可按需微调。 -
动画命名建议语义化：如
right-to-left-uncover比left-to-right-fade-in-2更准确反映实际行为，避免后续维护混淆。
总结：CSS 遮罩动画的方向控制是“渐变方向 + 位置锚点 + 尺寸变化”三者协同的结果。单改 to left 不足，必须配合 mask-position: right 才能真正实现从右向左的逐帧揭示效果。掌握这一组合逻辑，即可灵活实现任意方向的图片蒙版入场动画。
