CSS keyframe shimmer effect working in Chrome but not Firefox? - html

Question

I have the following HTML:
<div class="shimmer">
<img src="someImage">
<img src="otherImage">
</div>
CSS:
.shimmer img{
color: grey;
display:inline-block;
-webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
background-repeat: no-repeat;
animation: shimmer 3s infinite;
}
#keyframes shimmer {
100% {-webkit-mask-position:left}
}
A simple shimmer effect on the images.
When I open the HTML archive locally with Firefox or Chrome, it works perfectly fine. However, when I modify the internet webpage, the effect works fine in Chrome, but it doesn't appear in Firefox or mobile.
Help? I've been messing around with this for an hour and can't come up with the error. Thank you for your time.

Answer 1

It's because -webkit does not work in Firefox. But Firefox supports the mask property.
For example: You could declare all fallback properties.
div {
-webkit-mask: bla;
mask: bla;
}
Also see docs about the mask feature. At the bottom of the page you can see the supported browser.
https://developer.mozilla.org/en-US/docs/Web/CSS/mask
.shimmer img {
color: grey;
display: inline-block;
-webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 50%) right / 300% 100%;
mask: linear-gradient(-60deg, #000 30%, #0005, #000 50%) right / 300% 100%;
background-repeat: no-repeat;
animation: shimmer 3s infinite;
}
#keyframes shimmer {
0% {
-webkit-mask-position: 140% 140%;
mask-position: 140% 140%;
}
100% {
-webkit-mask-position: -20% -20%;
mask-position: -20% -20%;
}
}
<div class="shimmer">
<img src="https://i.stack.imgur.com/Sbpt3.jpg">
<img src="https://i.stack.imgur.com/Sbpt3.jpg">
</div>
(Tested in Chrome 95 and Firefox 94)
I also optimized your animation a bit by moving the mask outside for a smoother effect.