How do I achieve smoother CSS3 3D animations?

See more:

CSS3

3D

HTML5

This is what I currently have:

@keyframes spin {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(0px, 0px, 0px);
  }
  25% {
    -webkit-transform: rotate3d(0, 1, 0, 45deg) translate3d(-1649px, 0px, -675px);
  }
  50% {
    -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(0px, 0px, 0px);
  }
  75% {
    -webkit-transform: rotate3d(0, 1, 0, -45deg) translate3d(1622px, 0px, -679px);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 0deg) translate3d(0px, 0px, 0px);
  }
}

I created a simple fiddle, look at how much the animation starts to lag when it's turning: https://jsfiddle.net/secbxd4x/1/

I need this animation to be super smooth

Thanks for the help :)