CODEWITHSUNDEEP
htmlcss
wentjun
wentjun

Reputation: 42606

CSS keyframes (animation) not functioning in safari

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;

Upvotes: 2

Views: 3257

Answers (2)

Guatom
Guatom

Reputation: 61

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.

Upvotes: 1

Stefan Joseph
Stefan Joseph

Reputation: 555

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

Upvotes: 1

Related Questions