Css 无论是safari还是chrome，关键帧动画在ipad上都是不稳定的。如何在safari中平滑动画？

我已经做了一个360度的球动画旋转按钮点击在同一时间它左右移动。它在chrome和opera中工作得很好，但在firefox和iPad设备中存在问题。在iPad设备中，动画非常不稳定，那么如何添加平滑动画呢？在firefox中，数字没有显示

$（函数（）{
$（'#genBall'）。在（“单击”，函数（）{
$（'.8ball'）.addClass（“旋转球”）；
setTimeout（RemoveClass，2000）；
});
函数RemoveClass（）{
$（'8个球'）。移除类（“旋转球”）；
}
}); 
。八个球{
宽度：475px；
身高：475px；
溢出：隐藏；
位置：相对位置；
边界半径：50%；
背景：#1f84d0；
变换：旋转（12度）；
用户选择：无；
显示：表格；
}
.八个球：之前{
内容：“；
宽度：80px；
高度：80px；
背景：#fff；
位置：绝对位置；
顶部：30px；
左：40px；
z指数：999；
不透明度：0.8；
边界半径：50%；
过滤器：模糊（13px）；
}
.八个球：之后{
内容：“；
宽度：100%；
身高：100%；
不透明度：0.7；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
边界半径：50%；
变换：旋转（-137度）；
盒影：插图-3px06px2pxRGBA（255,255,255,0.2），
插入50px 0 70px 6px rgba（0,0,0,0.5）；
}
.八球内白{
宽度：75%；
身高：75%；
溢出：隐藏；
边缘顶部：55px；
左边距：6px；
边界半径：50%；
位置：相对位置；
显示：内联块；
背景：rgb（224235245）；
背景：-moz线性梯度（顶部，rgba（224235245,1）0%，rgba（190205214,1）100%）；
背景：webkit线性梯度（顶部，rgba（224235245,1）0%，rgba（190205214,1）100%）；
背景：线性梯度（至底部，rgba（224235245,1）0%，rgba（190205214,1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#e0ebf5'，endColorstr='#becdd6'，GradientType=0）；
}
.旋转球{
-webkit动画：旋转输入输出2秒；
-moz动画：旋转输入输出2秒；
-ms动画：旋转输入输出2秒；
-o型动画：旋转输入输出2秒；
动画：旋转输入输出2秒；
}
@-webkit关键帧rotateanim{
0%{左边距：0px；变换：旋转（12deg）；-webkit变换：旋转（12deg）；-moz变换：旋转（12deg）；-o变换：旋转（12deg）；-ms变换：旋转（12deg）；}
30%{左边距：340px；变换：旋转（205deg）；-webkit变换：旋转（205deg）；-moz变换：旋转（205deg）；-o变换：旋转（205deg）；-ms变换：旋转（205deg）；}
50%{左边距：-340px；变换：旋转（-320度）；变换：旋转（-320度）；-webkit变换：旋转（-320度）；-moz变换：旋转（-320度）；-o变换：旋转（-320度）；-ms变换：旋转（-320度）；}
100%{左边距：0px；变换：旋转（12deg）；变换：旋转（12deg）；-webkit变换：旋转（12deg）；-moz变换：旋转（12deg）；-o变换：旋转（12deg）；-ms变换：旋转（12deg）；}
}
@旋转的关键帧{
0%{左边距：0px；变换：旋转（12deg）；-webkit变换：旋转（12deg）；-moz变换：旋转（12deg）；-o变换：旋转（12deg）；-ms变换：旋转（12deg）；}
30%{左边距：340px；变换：旋转（205deg）；-webkit变换：旋转（205deg）；-moz变换：旋转（205deg）；-o变换：旋转（205deg）；-ms变换：旋转（205deg）；}
50%{左边距：-340px；变换：旋转（-320度）；变换：旋转（-320度）；-webkit变换：旋转（-320度）；-moz变换：旋转（-320度）；-o变换：旋转（-320度）；-ms变换：旋转（-320度）；}
100%{左边距：0px；变换：旋转（12deg）；变换：旋转（12deg）；-webkit变换：旋转（12deg）；-moz变换：旋转（12deg）；-o变换：旋转（12deg）；-ms变换：旋转（12deg）；}
}
.八球内白跨{
颜色：#222b32；
位置：绝对位置；
最高：50%；
左：50%；
字体大小：140px；
字体大小：粗体；
过渡：所有1秒；
转换：翻译（-50%，-50%）；
}

去
播放
最后，我找到了解决方案。在八球课后增加了额外的div。不要将旋转和移动赋予一个div，而是将单独的动画赋予两个div。将移动赋予主div，将旋转赋予子div


$（函数（）{
$（'#genBall'）。在（“单击”，函数（）{
$（'.8ball'）.addClass（“旋转球”）；
setTimeout（RemoveClass，2000）；
});
函数RemoveClass（）{
$（'8个球'）。移除类（“旋转球”）；
}
}); 
。八个球{
宽度：475px；
身高：475px；
溢出：隐藏；
位置：相对位置；
边界半径：50%；
背景：#1f84d0；
用户选择：无；
显示：表格；
}
.8球>跳水{
宽度：100%；
身高：100%；
}
.8ball>div:之前{
内容：“；
宽度：80px；
高度：80px；
背景：#fff；
位置：绝对位置；
顶部：30px；
左：40px；
z指数：999；
不透明度：0.8；
边界半径：50%；
过滤器：模糊（13px）；
}
.八个球：之后{
内容：“；
宽度：100%；
身高：100%；
不透明度：0.7；
位置：绝对位置；
左：0；
右：0；
排名：0；
底部：0；
边界半径：50%；
变换：旋转（-137度）；
盒影：插入-3px06px2pxRGBA（255，255，255，0.2），插入50px070px6pxRGBA（0，0，0.5）；
}
.八球内白{
宽度：75%；
身高：75%；
溢出：隐藏；
边缘顶部：55px；
左边距：6px；
边界半径：50%；
位置：相对位置；
显示：内联块；
变换：旋转（12度）；
背景：rgb（224235 245）；
背景：-moz线性梯度（顶部，rgba（224235，245，1）0%，rgba（190205，214，1）100%）；
背景：-webkit线性梯度（顶部，rgba（224235，245，1）0%，rgba（190205，214，1）100%）；
背景：线性梯度（到底部，rgba（224235 245，1）0%，rgba（190205，214，1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#e0ebf5'，endColorstr='#becd6'，