CODEWITHSUNDEEP
cssanimationsvgcss-animationskeyframe
Quentin D
Quentin D

Reputation: 421

Safari - CSS keyframe animation not triggering

I have an SVG with a simple CSS animation which works perfectly in every browser.

Except Safari (tested on Safari 15.3 on a MacOS M1).

.foobar {
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  animation: rotate 10s linear infinite;
}

@keyframes rotate {
  0% {
    transform: translate(50%, -50%);
  }
  100% {
    transform: translate(50%, -50%) rotate(-360deg);
  }
}

The first keyframe is applied (the translate), but it stays frozen on this frame.

Upvotes: 0

Views: 286

Answers (1)

Quentin D
Quentin D

Reputation: 421

Oddly enough, Safari requires to specify the rotate on the first keyframe:

@keyframes rotate {
  0% {
    transform: translate(50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(50%, -50%) rotate(-360deg);
  }
}

And now it works 🤷‍♂️

Upvotes: 1

Related Questions