Q:

webkit transform rotate not working on Safari

Im trying to make the rotation of this CSS animation work on Safari.
@keyframes hexagon {
  0% { transform:rotate(0deg); }
  50% { transform:rotate(360deg); }
  68% { transform:rotate(0deg); transform:scale(1); }
  71% { transform:rotate(0deg); transform:scale(1); }
  76% { transform:rotate(360deg); transform:scale(1.25); }
  85% { transform:rotate(360deg); transform:scale(1); }
  86% { transform:rotate(360deg); transform:scale(1); }
  100% { transform:rotate(0deg); }
}

You can check it at https://codepen.io/bryceyork/pen/JdRbQw
I have added the webkit- prefix, but its still not working:
@-webkit-keyframes hexagon {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
  68% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  71% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  76% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    -webkit-transform: scale(1.25);
            transform: scale(1.25);
  }
  85% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  86% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

You can check it at https://codepen.io/anon/pen/qoQGeL
What am I doing wrong? Should I add anything else?

A:

This problem is vexing, but I think I sort of solved it by brute force. You may want to tweak timing. I didn't touch your original keyframes, but did change the webkit keyframes. Using a different-coded set of keyframes for webkit seems to do the thing you want:
@keyframes hexagon {
  0% { transform:rotate(0deg); }
  50% { transform:rotate(360deg); }
  68% { transform:rotate(0deg); }
  71% { transform:rotate(0deg) scale(1); }
  76% { transform:rotate(360deg) scale(1.25); }
  85% { transform:rotate(360deg) scale(1); }
  86% { transform:rotate(360deg); }
  100% { transform:rotate(0deg); }
}

@-webkit-keyframes hexagon {
  0% { 
  -webkit-transform:rotate(0deg) scale(1); 
  }
  75% { 
  -webkit-transform:rotate(360deg) scale(1);  
  }
  75.1% { 
  -webkit-transform:rotate(0deg) scale(1);  
  }
  80% { 
  -webkit-transform:rotate(0deg) scale(1); 
  }
  88% { 
  -webkit-transform:rotate(0deg) scale(1.25); 
  }
  96% { 
  -webkit-transform:rotate(0deg) scale(1); 
  }
  100% { 
  -webkit-transform:rotate(0deg) scale(1);
  }

}

https://codepen.io/anon/pen/zWeYwL
You'll note in the codepen I also do this:
-webkit-animation: hexagon 3.5s ease infinite;
 animation: hexagon 4s ease-in-out

As to WHY this works... honestly I do not know. Feels like a bug. Not tested in IE!

