Css 设置背景图像动画'；s的位置来回移动

我想动画我的背景图像和重复x从左到右和从右到左的位置时，在结束

我的代码：

@keyframes animatedBackground {
  0% { background-position: 0 0; }
  100% { background-position: -100% 0; }
}

body.rotonde{
  background-image: url(../pages/bg.jpg);
  background-repeat: repeat-x;
  animation: animatedBackground 15s linear infinite;
  overflow: hidden;
}

我的代码不起作用，因为当后台处于

-100%

状态时，我会在

0

上重新启动

 @keyframes animatedBackground {
        from { background-position: 0 0; }
        to { background-position: 100% 0; }
    }


    #animate-area   { 
        width: 560px; 
        height: 400px; 
        background-image: url(../pages/bg.jpg);
        background-position: 0px 0px;
        background-repeat: repeat-x;

        animation: animatedBackground 40s linear infinite;
    }

---

当

0

达到

-100%

时，您会在

0上重新启动的原因在于动画通常是如何工作的。一旦完成一个循环，它们通常会返回到原始状态并重新启动下一个循环。因此，一旦达到
-100%
（结束状态），它就会将位置重置为
0
（开始状态）

当位置在末端时，从左到右和从右到左

对于以上内容，您可以使用
动画方向
作为
备选方向
。这将使动画为奇数迭代从
0
到
-100%
，然后为偶数迭代从
-100%
到
0
设置背景位置的动画


@关键帧动画背景{
0%{背景位置：0；}
100%{背景位置：-100%0；}
}
身体{
背景图片：url(http://placehold.it/100x100);
背景重复：重复-x；
动画：动画背景15s线性交替无限；
溢出：隐藏；
}
动画一直运行到结尾，默认情况下从开头重新开始。
“动画方向”属性处理该问题。以下是一些选项：

正常-默认值。动画按正常方式（向前）播放

反向-动画以反向（向后）播放

交替-动画先向前播放，然后向后播放
交替反转-动画先向后播放，然后向前播放
初始-将此属性设置为其默认值。

继承-从其父元素继承此属性

我更喜欢使用alternate，它运行到末尾，然后反向返回

尝试：

@keyframes animatedBackground {
  0% { background-position: 0 0; }
  100% { background-position: -100% 0; }
}

body.rotonde{
  background-image: url(../pages/bg.jpg);
  background-repeat: repeat-x;
  animation: animatedBackground 15s linear infinite;
  overflow: hidden;
  **animation-direction: alternate**;
}