CSS keyframes (animation) not functioning in safari - html

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

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

Answer 2

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.