CSS Translate/Animation conflict on Safari refresh

问题:

I'm trying to run an animation on an infinite loop, starting when the page loads. Everything works fine until you hit refresh while viewing on Safari on both Mobile and Desktop.

The first time the page loads everything works just fine, it's on refresh when the translate property fails. If I remove the animation, CSS Translate works fine.

The animation goes like this (and I did try using the -webkit- prefix but it won't work).

@keyframes circulo_claro { 
    50% {transform: translate(-43%,45%) rotate(8deg);},
    100% {transform: translate(-43%,45%) rotate(0deg);} 
}

@keyframes circulo_naranja { 
    to {transform: translate(-43%,45%) rotate(0deg);} 
}

This is my full code: https://jsfiddle.net/r8wcLLfb/3/