0

I am currently making an animation that will apply a gradient mask on an image. The mask is a transparent mask and it will transform from right to left of the image. Here is my code.

<!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>

Basically, the animation works well. However, the mask image is only applied to a specific area when it moves from right to left. Because the mask is transparent, I expect when it moves to the new area, the previous area it passed through is also transparent. How can I do to make the previous area transparent too?

Mask image Thank you so much for your time.

PhanDC
  • 71
  • 9

1 Answers1

2

You are almost good, you only need to disable the repetition by using 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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Thanks for your help. I am still confused why mask-no-repeat can work here. – PhanDC May 21 '22 at 15:30
  • 1
    @PhanDC by default the gradient will repeat and what you need is to have only one gradient for the mask so you have to use no-repeat – Temani Afif May 21 '22 at 17:35
  • Well, I cannot totally understand why my animation behaves like that after adding no-repeat. The animation in my question moves the mask from right to left. And now with adding no-repeat, it shows piece by piece of the image and adding the mask to the end of the image. Could you explain why the animation behaves like that? – PhanDC May 22 '22 at 08:12