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 :)