CODEWITHSUNDEEP
jquerycsshtmlsafarifrontend
Oleg Verichko
Oleg Verichko

Reputation: 329

Animation-play-state: running dosen't work in safari 11

At first the element has property animation-play-state: paused, then the script modifies to property animation-play-state: running. All browsers deal with the task, but Safari 11 doesn't start the animation.

What's the problem? How can I solve this task?

Upvotes: 5

Views: 992

Answers (2)

franklylately
franklylately

Reputation: 1183

Building on calipoop's answer -- Safari 8 seemed to need the assigned animation to be changed entirely (in my example, I used 'fakename' to trick it).

Using the jquery line: $(".animationpaused").removeClass("animationpaused");

with CSS:

.snowgrid.snowgrid1 {
 -webkit-animation: snowgrid 9s 2 ease-in-out;
 animation: snowgrid 9s 2 ease-in-out;
}
.snowgrid.snowgrid2 {
 -webkit-animation: snowgrid 15s 1 ease-in-out;
 animation: snowgrid 15s 1 ease-in-out;
}
.snowgrid.animationpaused {
 -webkit-animation: fakename 10s 1 ease-in-out;
 animation: fakename 10s 1 ease-in-out;
 -webkit-animation-play-state: paused !important;
 animation-play-state: paused !important;
}

Most likely this will not allow you to toggle play/pause on the animation, but this works if you're simply waiting for a user interaction to start the animation.

Upvotes: 0

calipoop
calipoop

Reputation: 852

I was experiencing the same issue: my animation was paused initially and then set to "running" via JS. This worked on all modern browsers except Safari.

My solution was to refactor/reverse the paused/running logic - I left the initial/default state as "running", not "paused". Then I added and removed my "paused" class as necessary. I'm no longer toggling the "running" state anywhere in my css, only a class with "paused" state.

The following setup now works for me in Safari:

.fancyEl {
  animation: fancyAni ease-in-out 1.5s infinite;
}

.fancyEl.paused {
  animation-play-state: paused;
}

Upvotes: 3

Related Questions