使用透明渐变蒙版制作 css 动画

Question

我目前正在制作将在图像上应用渐变蒙版的动画。遮罩是透明遮罩，它将从图像的右向左变换。这是我的代码。

<!DOCTYPE html>
<html>
<head>
<style> 
.container {
 height: 100vh;
 width: 100vw;
 background-color: white;
 position: relative;
}

.first {
 background-image: url('https://i.ibb.co/17zzm7P/flower.jpg'); 
 background-size:cover;
 position: absolute;
 height: 100%;
 width: 100%;  
 -webkit-mask-image:  linear-gradient(to left, transparent 0px, black 20rem, black);
 -webkit-animation: rightToLeft 5s forwards;  
}

@keyframes rightToLeft {
 0% {
    -webkit-mask-position: 100vw 0%;
    mask-position: 100vw 0%;
    
  }
  100% {
    -webkit-mask-position:  0vw 0vw;
    mask-position: 0vw 0vw;
    
  }
}

</style>
</head>
<body>

<div class="container">
<div id="first" class="first"> </div>
</div>
</body>
</html>

基本上，动画效果很好。但是，掩码图像仅在从右向左移动时应用于特定区域。因为遮罩是透明的，我希望当它移动到新区域时，它经过的先前区域也是透明的。我怎样才能让之前的区域也透明？

非常感谢您的宝贵时间。

Answer 1

你差不多好了，只需要使用mask-repeat: no-repeat

禁用重复即可

.container {
  height: 100vh;
  background-color: white;
  position: relative;
}

.first {
  background-image: url('https://i.ibb.co/17zzm7P/flower.jpg');
  background-size: cover;
  position: absolute;
  height: 100%;
  width: 100%;
  -webkit-mask-image: linear-gradient(to left, transparent, black 20rem);
  -webkit-mask-repeat: no-repeat;
  -webkit-animation: rightToLeft 5s forwards;
}

@keyframes rightToLeft {
  0% {
    -webkit-mask-position: 100vw 0%;
    mask-position: 100vw 0%;
  }
  100% {
    -webkit-mask-position: 0vw 0vw;
    mask-position: 0vw 0vw;
  }
}

body {
 margin:0;
}

<div class="container">
  <div id="first" class="first"> </div>
</div>

使用透明渐变蒙版制作 css 动画

Making a css animation using a transparent gradient mask

javascript

css

css-animations

css-mask