Safari刷新时的CSS翻译/动画冲突

Question

我尝试在无限循环上运行动画，从页面加载时开始。一切正常，直到你在移动和桌面上的Safari上查看时刷新。

第一次加载页面时，一切正常，当translate属性失败时，它会刷新。如果我删除动画，CSS Translate工作正常。

动画是这样的（我确实尝试使用-webkit-前缀，但它不会起作用）。

@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);} 
}

这是我的完整代码：https://jsfiddle.net/r8wcLLfb/3/