Why can't Safari handle CSS3 3D transforms?

Question

I have a 3D rotating cube I created that works great in Chrome and Firefox. However it does not animate at all in Safari (desktop and mobile).

I am using the autoprefixer on the CSS so there should be no issue there, however I can't seem to solve why I can't get it to animate in Safari. Are there some CSS rules I am using that Safari doesn't support?

Here is what I have on the overall cube:

.cube {
  position: relative;
  transform-style: preserve-3d;
  animation-name: rotate;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
    transform: rotateX(90deg) rotateY(90deg);
}

You can view the full code here:

https://codepen.io/kkranzo/pen/PoEyKpz

Answer 1

I ended up finding the issue. Apparently Safari doesn't like animations with only two keyframes. I went ahead and added the below at 50% of the animation and it now works on Safari. I updated the code on Codepen as well.

50% {
    transform: rotate3d(0, 1, 0, 180deg);
}