CSS关键帧Shimmer效果在Chrome正常生效但Firefox及移动端失效的技术求助

Looks like the issue boils down to browser prefix compatibility and non-standard property usage. Your current code relies solely on WebKit-specific prefixes (-webkit-), which Firefox (Gecko engine) and many mobile browsers don't recognize. Here's how to fix it:

Root Cause #

• You're only using -webkit-mask — Firefox and non-WebKit mobile browsers require the standard mask property without the prefix.
• The background-repeat: no-repeat declaration doesn't affect the mask; you need mask-repeat (or -webkit-mask-repeat) for that.

Corrected CSS Code #

.shimmer img { 
  color: grey; 
  display: inline-block; 
  /* Add standard mask property for Firefox + non-WebKit browsers */
  mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right / 300% 100%;
  -webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right / 300% 100%;
  /* Use mask-repeat instead of background-repeat */
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  animation: shimmer 3s infinite;
  /* Add Firefox prefix for animation as a fallback */
  -moz-animation: shimmer 3s infinite;
} 

/* Standard keyframes + Firefox prefix for full compatibility */
@keyframes shimmer { 
  100% { 
    mask-position: left;
    -webkit-mask-position: left;
  }
}

@-moz-keyframes shimmer { 
  100% { 
    mask-position: left;
  }
}

Additional Checks #

• Verify CSS Loading: Ensure your corrected CSS is properly deployed and not cached by the browser (use hard refresh: Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on Mac).
• Check for Style Overrides: Use browser dev tools to inspect the images and confirm no other CSS rules are overriding the mask or animation properties.
• Mobile Compatibility: Most modern mobile browsers support the standard mask property. For older devices, ensure you're not targeting versions that lack this feature.

This should make the shimmer effect work consistently across Chrome, Firefox, and mobile browsers once deployed.

内容的提问来源于stack exchange，提问作者Adehmar