HTML - mask-image

Hi!

I need to create an effect in html using css where a part of the graphic is revealed using a wipe with a gradient transition (without a sharp edge).
I used a css mask for it, but even though it works perfectly in the Chrome browser, it doesn’t in the HTML producer. (Tested in 2.4.0)
Is there any way to achieve this effect (soft wipe) that would also work in HTML producer?

 <style>
.masked {
    position: absolute; width: 960px; height: 540px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%,  rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%);
    mask-size: 100% 200%;
    mask-repeat: no-repeat;
     animation: clip-fade 500ms 0s ease-in-out both ; 
}

@keyframes clip-fade {
  0% {
            mask-position: 0px 540px;
  }
  100% {
            mask-position: 0px -400px;
  }
}
 </style>
<body>
    <div class="masked">
      <img src="../Images/Podklady/Hriste_Fotbal.png" />
    </div>
</body>

Because the version of CEF/chromium used in CasparCG is not the latest (using 117), you will have to use the -webkit- prefix

It works!!!
Great!

Many Thanks