title: Safari CSS Bug: Animation Rotation Direction Incorrect?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Working CodePen example: <a href="http://codepen.io/michaelmarcialis/pen/obPYPO" rel="nofollow">http://codepen.io/michaelmarcialis/pen/obPYPO</a></p>
  
  <pre><code>@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);
    }
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Does anyone know a remedy for this?</p>