'Animation css not working in safari browser

animation: shine 4s linear infinite;
@keyframes shine {
        0% {
          background-position-x: -500%;
        }
        100% {
          background-position-x: 500%;
        }
      }

I use this style in react js web page. Its work all browser except safari browser i dont know why.

Safari browser didn't display that animation text.

Any one help to solve this problem

cssreactjsanimationsafaricss-animations


Solution 1:[1]

Found the solution. In Safari when you use Keyframes you need to use the whole percentage:

this won't work:

@-webkit-keyframes shine{
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
}

this will:

@-webkit-keyframes shine{
    0% { -webkit-transform: rotate(0deg); }
    5% { -webkit-transform: rotate(-14deg); }
    10% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(0deg); }
}

Don't know why but that's the way Safari works! :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rajneesh Chaurasia

Related Questions