Safari CSS Bug: Animation Rotation Direction Incor

Question

I'm writing a custom animation for a project I'm working on. The idea is that the animation is meant to resemble an exclamation mark becoming unhinged from the baseline, swinging for a moment, and then falling off the baseline entirely.

For some reason, only Safari (OSX and iOS) refuses to render the first animation keyframe as a clockwise rotation in a CSS animation I've made. Instead, it renders the keyframe as a counter-clockwise animation, but then works just fine for the following animation keyframes.

Working CodePen example: http://codepen.io/michaelmarcialis/pen/obPYPO

@keyframes unhinged {
  0% {
    transform: rotate(0deg);
  }
  15% {
    transform: rotate(240deg);
  }
  30% {
    transform: rotate(125deg);
  }
  45% {
    transform: rotate(220deg);
  }
  60% {
    transform: rotate(145deg);
  }
  75% {
    opacity: 1;
    transform: rotate(200deg);
  }
  90% {
    opacity: 0;
    transform: translate(-0.5rem, 8.57142857142857rem) rotate(215deg);
  }
  95% {
    opacity: 0;
    transform: translate(0) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

All other browsers render the animation as intended, with the first animation keyframe rotating clockwise. Safari is the only one that applies a counter-clockwise rotation in the initial keyframe. I'm assuming Safari is doing this because the distance to travel the rotation is shorter when going counter-clockwise, but it's not honoring the CSS spec properly if that's the case.

Does anyone know a remedy for this?

Answer 1

The problem is that if you try to animate a rotate in safari greater than 180 degrees, it will instead rotate the other way. So if you try to rotate +270 degrees, Safari will animate a rotation of -90 degrees.

The workaround for Safari is to never rotate more than 179 in either direction, then complete the rest of the rotation in another segment.