本文详解如何通过 WebKit 掩码（mask）配合 linear-gradient 和 mask-position 精确控制图像的渐显方向，解决仅修改渐变方向却动画未反转的常见误区。
本文详解如何通过 webkit 掩码（mask）配合 `linear-gradient` 和 `mask-position` 精确控制图像的渐显方向，解决仅修改渐变方向却动画未反转的常见误区。
要实现图像“从右向左”逐步显现（即右侧先出现、向左展开），核心在于掩码的起始位置与渐变方向需协同控制，而不仅仅是修改 linear-gradient(to left)。CSS 掩码（-webkit-mask-image）本身定义了透明度分布，但掩码在元素上的初始对齐位置由 -webkit-mask-position 决定——若不显式设置，它默认居中（center），导致即使渐变方向为 to left，视觉上仍可能表现为从左到右“滑入”。
✅ 正确做法是：
- 将渐变方向设为 to left，使不透明区域从右侧开始；
- 同时将 -webkit-mask-position: right，确保掩码的“起点”锚定在容器右侧；
- 动画过程中，通过 mask-size 从 0% 扩展至 100%，让掩码覆盖范围从右向左增长。
以下是完整可运行的代码示例：
.fade-in-img-2 {
animation: right-to-left-fade-in 1s ease-in;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: right; /* 关键：锚定掩码于右侧 */
-webkit-mask-size: 0% 100%; /* 初始宽度为0，高度满屏 */
display: flex;
justify-content: center;
}
.fade-in-img-2 .fade-img-2 {
width: 60%;
}
@keyframes right-to-left-fade-in {
0% {
-webkit-mask-size: 0% 100%;
-webkit-mask-image: linear-gradient(
to left,
rgba(0, 0, 0, 1) 70%, /* 70%处保持不透明 */
rgba(0, 0, 0, 0) /* 剩余30%透明 */
);
}
100% {
-webkit-mask-size: 100% 100%;
-webkit-mask-image: linear-gradient(
to left,
rgba(0, 0, 0, 1) 70%,
rgba(0, 0, 0, 0)
);
}
}<div class="fade-in-img-2"> <img class="fade-img-2" src="https://picsum.photos/200/300" alt="Sample image"> </div>
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- -webkit-mask-* 属于实验性前缀属性，目前主要支持 Chrome、Edge 和 Safari；如需更广泛兼容，建议搭配 mask-image 标准属性（现代浏览器已支持）并保留前缀作为降级；
- mask-size 需明确指定宽高（如 100% 100%），避免因默认行为引发尺寸歧义；
- 渐变中的颜色停止点（如 70%）决定了“硬边”位置，调整该值可控制显露区域的锐利程度；
- 若希望动画更自然，可将 ease-in 改为 cubic-bezier(0.34, 1.56, 0.64, 1) 实现轻微回弹效果。
总结：图像方向性掩码动画 = 渐变方向 × 掩码定位 × 尺寸变化。三者缺一不可——仅改 to left 是“纸上谈兵”，加上 mask-position: right 才真正让动画“落地”。
