背景-混合模式在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中对background-blend-mode的支持从版本10.1开始，你可以在caniuse.com中找到它。另一个问题可能是background-blend-mode的动画，根据W3学校的说法，background-blend-mode is not animatable.You可以在这个link中找到这个，但我不能完全确定这个(背景混合模式不是可动画的).This是因为我尝试了它，它工作了。所以问题可能出在Safari版本上。