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

Question

我正在开发一个产品。我做了一道闪电。此动画在 chrome 上效果很好。但是 Safari 上没有动画。这个问题是由背景混合模式还是其他原因引起的？

代码：

.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;
  }
}

Answer 1

这可能是因为您的 safari 版本。 Safari 10.1 版本开始支持 background-blend-mode，您可以在 caniuse.com 中找到它。另一个问题可能是 background-blend-mode 的动画，根据 W3 学校 background-blend-mode 不是 animatable.You 可以在这个 link 中找到这个但是我对此不太确定（background-blend-mode not being animatable）。这是因为我试过了并且成功了。所以问题可能出在 Safari 版本上。

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

background-blend-mode not working on Safari CSS

css

safari

webkit

css-animations

background-blend-mode