Making a css animation using a transparent gradient mask

Question

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?

Thank you so much for your time.

Temani Afif · Accepted Answer · 2022-05-21 13:02:39Z

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>

answered May 21, 2022 at 13:02

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PhanDC Over a year ago

Thanks for your help. I am still confused why mask-no-repeat can work here.

Temani Afif Over a year ago

@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

PhanDC Over a year ago

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?

Collectives™ on Stack Overflow

Making a css animation using a transparent gradient mask

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related