在Safari上平滑@关键帧动画变得离散

的问题可以通过以下方式解决：

1. 使用CSS动画替代关键帧动画：CSS动画是基于时间轴的动画，可以在不同的关键帧之间自动进行补间动画，从而实现平滑的动画效果。可以使用transition属性结合transform属性来创建平滑的动画效果。
2. 使用JavaScript库：可以使用一些流行的JavaScript库如GreenSock Animation Platform（GSAP）或Velocity.js来处理动画。这些库可以处理跨浏览器兼容性，并提供更平滑的动画效果。
3. 使用硬件加速：通过将动画元素应用3D转换（例如使用CSS属性transform: translateZ(0)）来启用硬件加速，可以提高动画在Safari上的性能和平滑度。
4. 使用requestAnimationFrame：使用requestAnimationFrame方法代替使用setTimeout或setInterval来执行动画更新。requestAnimationFrame可以更好地与浏览器的绘制机制同步，提供更平滑的动画效果。

综上所述，以上是解决在Safari上平滑@关键帧动画变得离散的一些常用方法。这些方法都可以在Safari浏览器上实现平滑的动画效果。对于更详细的实现方式和代码示例，您可以参考以下链接：

• CSS动画：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations
• GreenSock Animation Platform：https://greensock.com/
• Velocity.js：http://velocityjs.org/
• 硬件加速：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Compositing/Using_Hardware_Acceleration
• requestAnimationFrame：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame