CSS 关键帧闪光效果在 Chrome 中有效，但在 Firefox 中无效？答案

【问题标题】：CSS keyframe shimmer effect working in Chrome but not Firefox?CSS 关键帧闪光效果在 Chrome 中有效，但在 Firefox 中无效？
【发布时间】：2021-12-22 04:22:47
【问题描述】：

我有以下 HTML：

<div class="shimmer">
  <a href="somePage" target="_blank"><img src="someImage"></a>
  <a href="otherPage" target="_blank"><img src="otherImage"></a>
</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}
}

对图像进行简单的微光效果。

当我使用 Firefox 或 Chrome 在本地打开 HTML 存档时，它运行良好。但是，当我修改互联网网页时，效果在 Chrome 中可以正常工作，但在 Firefox 或移动设备中没有出现。

帮助？我已经搞砸了一个小时，无法提出错误。感谢您的宝贵时间。

【问题讨论】：

您的代码似乎可以正常工作，但您没有提供“修改互联网网页”的示例，所以我无法判断是什么导致了问题。你能添加一个不起作用的例子吗？

标签： html css effect shimmer

【解决方案1】：

这是因为-webkit 在 Firefox 中不起作用。但 Firefox 支持 mask 属性。

例如：您可以声明所有后备属性。

div {
  -webkit-mask: bla;
  mask: bla;
}

另请参阅有关遮罩功能的文档。在页面底部可以看到支持的浏览器。

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">
  <a href="somePage" target="_blank"><img src="https://i.stack.imgur.com/Sbpt3.jpg"></a>
  <a href="otherPage" target="_blank"><img src="https://i.stack.imgur.com/Sbpt3.jpg"></a>
</div>

（在 Chrome 95 和 Firefox 94 中测试）

我还稍微优化了你的动画，将蒙版移到外面以获得更平滑的效果。

【讨论】：