如何实现CSS图片从右向左揭露动画？修改渐变方向无效问题

你当前的代码仅修改linear-gradient方向无法实现从右向左揭露效果，核心原因是mask-size从0%到100%的扩展默认从元素左上角开始，渐变方向的改变不会影响mask的扩展起始位置。以下是两种可行的修正方案：

方案一：调整Mask定位与渐变方向 #

通过设置mask初始位置，配合反向渐变，让mask从右侧开始扩展：

<div class="fade-in-img-2">
  <img class="fade-img-2" src="your-image-url"/>
</div>
<style>
.fade-in-img-2 {
  animation: right-to-left-fade-in 1s ease-in forwards;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; /* 将mask初始定位到元素右侧 */
  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%;
    -webkit-mask-image: linear-gradient(
      to left, /* 渐变方向从右到左，实色区域在右侧 */
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1) 70%
    );
  }
  100% {
    -webkit-mask-size: 100%;
    -webkit-mask-image: linear-gradient(
      to left,
      rgba(0, 0, 0, 0),
      rgba(0, 0, 0, 1) 70%
    );
  }
}
</style>

关键修改点：

• 新增-webkit-mask-position: 100% 0，让mask初始位置固定在元素右侧
• 渐变方向改为to left，确保实色（显示图片）区域在右侧，透明区域在左侧
• 动画中mask-size从0%扩展到100%，mask会从右向左覆盖元素，实现揭露效果

方案二：使用Transform + Overflow（兼容性更好） #

如果担心mask属性的浏览器兼容性，可以用容器裁剪+图片平移的方式实现：

<div class="fade-container">
  <img class="fade-img" src="your-image-url"/>
</div>
<style>
.fade-container {
  width: 60%;
  margin: 0 auto;
  overflow: hidden; /* 裁剪超出容器的图片部分 */
}
.fade-img {
  width: 100%;
  animation: slide-in-right 1s ease-in forwards;
  transform: translateX(100%); /* 初始状态完全移出容器右侧 */
}
@keyframes slide-in-right {
  to {
    transform: translateX(0); /* 动画结束时回到容器内 */
  }
}
</style>

这个方案通过平移图片，结合容器的overflow裁剪，模拟从右向左揭露的效果，兼容性覆盖更多浏览器版本。

内容的提问来源于stack exchange，提问作者Christopher Woodby