CSS keyframes (animation) not functioning in safari

Question

I am currently facing some issues with CSS's @keyframes, as they do not seem to work to work on Safari browser. They are working fine on Chrome, though.

I have checked with the list of WebKit CSS extensions , but I do not seem to have any luck with it.

 .app-loading { } .app-loading .spinner { height: 200px; width: 200px; animation: rotate 2s linear infinite; -webkit-animation: rotate 2s linear infinite; transform-origin: center center; -webkit-transform-origin: center center; position: absolute; top: 0; bottom: 10; margin: auto; } .app-loading .spinner .path { stroke-dasharray: 1, 200; stroke-dashoffset: 0; -webkit-animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; stroke: #ddd; } @keyframes rotate { 100% { transform: rotate(360deg); } } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } } @keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } } @-webkit-keyframes dash { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 89, 200; stroke-dashoffset: -35px; } 100% { stroke-dasharray: 89, 200; stroke-dashoffset: -124px; } }

 <div class="app-loading"> <svg class="spinner" viewBox="25 25 50 50"> <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" /> </svg> </div>

I have also created a demo on JSfiddle .

I understand there are many similar questions out there, but none of them seem to be solving the issue I am facing right now:

1) CSS Keyframe animations safari

2) CSS3 animation not working in safari

Would appreciate some help over here. Thanks!

---

EDIT 1:

What other things I've tried - replacing the -webkit-animation shorthand with the below

-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: infinite;

Answer 1

I faced the same problem with Safari, using expanded properties for Keyframes, and what fixed the problem for me was using the absolute strict shorthand definition:

/* @keyframes duration | timing-function | delay | 
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

Note that the keyframe name is at the end of the definition, I think that could be the problem.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/animation

Please also note that recent versions of Safari don't use -webkit- prefix so there's no need to add that if your platform doesn't aim for retrocompatibility.

Answer 2

In Safari the shorthand notation does not work.

So this will not work :

-webkit-animation: rotate 2s linear infinite;

Instead try writing your animation in full form like this :

-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: infinite;

Do the same to your other animation as well and see if it works