背景混合模式不适用于 Safari CSS答案

【问题标题】：background-blend-mode not working on Safari CSS背景混合模式不适用于 Safari CSS
【发布时间】：2021-01-30 22:19:57
【问题描述】：

我正在开发一种产品。我做了一道闪电。这个动画在 chrome 上效果很好。但是 Safari 上没有动画。这个问题是由 background-blend-mode 还是其他原因引起的？

代码：

.block-2 {
    -webkit-animation-name: thund;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    background-blend-mode: normal;
    background-image:url(thunder.png), url(red-bg.jpg);
    background-position: 99%, 100%;
    background-repeat: no-repeat;

}

@keyframes thund {
  0% {   background-blend-mode: normal;
    }
  100% {   background-blend-mode: hue;
    }
  }

@-webkit-keyframes thund {
0% {   background-blend-mode: normal;
  ;}
100% {   background-blend-mode: hue;
  }
}

【问题讨论】：

您能否将其创建为 sn-p 并上传您的图片？

标签： css safari webkit css-animations background-blend-mode

【解决方案1】：

这可能是因为您的 Safari 版本。 safari 支持background-blend-mode 从版本 10.1 开始，您可以在 caniuse.com 找到它。另一个问题可能是background-blend-mode 的动画，根据 W3 学校的说法，background-blend-mode 是不可动画的。您可以在此 link 中找到它，但我对此并不完全确定（背景混合模式不可动画）。这是因为我尝试过它并且它有效。所以问题可能出在 Safari 版本上。

【讨论】：