0

I am developing a product. I made a flash of lightning. This animation works great on chrome. But there is no animation on Safari. Is this problem caused by background-blend-mode or another thing?

Code:

.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;
  }
}
cenkdincturk
  • 5
  • 1

1 Answers1

0

This may be because of your safari version. Support for background-blend-mode in safari starts from version 10.1, you can find this in caniuse.com. Another problem might be the animation of background-blend-mode, according to W3 schools background-blend-mode is not animatable.You can find this in this link but I am not completely sure about this(background-blend-mode not being animatable).This is because I tried it and it worked. So the problem might be the Safari version.

David Ngumbu
  • 134
  • 9