我正在try 使用background-position创建一个平滑的动画来模拟缓慢移动的背景图像.虽然动画在Chrome和Edge中按预期运行，但在Firefox中，动画为isn't running smooth;图像的背景位置以小 skip 方式移动.
如果您使用Firefox以及Chrome或Edge打开this link，您可以看到其中的区别.
我的html代码:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="img-background-horizontal"></div>
</body>
</html>
css代码:
body {
padding: 0;
margin: 0;
}
.img-background-horizontal {
background-image: url("https://cdn.pixabay.com/photo/2020/12/18/15/29/mountains-5842346_1280.jpg");
background-size: 105vw auto;
background-position: 0% 0%;
height: 100vh;
width: 100vw;
animation: horizontalMove 50s infinite;
animation-timing-function: ease;
}
@keyframes horizontalMove {
0% {
background-position: 0% 0%;
}
50% {
background-position: 100% 20%;
}
100% {
background-position: 0% 0%;
}
}
我试图通过将animation-timing-function更改为例如cubic-bezier来解决这个问题，但问题仍然存在.我怀疑当动画运行速度非常慢时，Firefox中就会出现这个问题.当我将animation-duration减少到几秒时，动画运行得更快并且看起来很流畅.然而，调整这个参数对我来说不是一个可行的解决方案.
我可以采取哪些措施来解决这个问题？