Javascript 像这样设置图像动画'；从右向左移动

我试图动画地板应该从右到左移动像云和它的工作，但问题是它溢出外的容器。我怎样才能防止这种情况发生？对不起，我是css动画新手。提前谢谢

这是我做的小提琴：咔嗒

.container{
宽度：50%；
保证金：0自动；
文本对齐：居中；
}
#云彩{
填充：100px0；
背景:3598dc ;；
背景：-webkit线性梯度（顶部，3598DC0%，#fff 100%）；
背景：-线性梯度（顶部，3598DC0%，#fff 100%）；
背景：-莫兹线性梯度（顶部，3598dc0%，#fff 100%）；
}
.云{
宽度：200px；高度：60px；
背景：#fff；
边界半径：200px；
-moz边界半径：200px；
-webkit边界半径：200px；
位置：相对位置；
}
.cloud:之前，.cloud:之后{
内容：''；
位置：绝对位置；
背景：#fff；
宽度：100px；高度：80px；
位置：绝对；顶部：-15px；左侧：10px；
边界半径：100px；
-moz边界半径：100px；
-webkit边界半径：100px；
-webkit变换：旋转（30度）；
变换：旋转（30度）；
-moz变换：旋转（30度）；
}
.云：之后{
宽度：120px；高度：120px；
顶部：-55px；左侧：自动；右侧：15px；
}
#性格{
利润上限：-120px；
背景：url(http://i.imgur.com/Zjsbcni.png);
宽度：84px；
高度：126px；
动画：行走1.0步（6）无限；
左边距：425px；
}
#地板{
高度：39px；
背景图片：url(http://i.imgur.com/usFekrp.png);
动画：movefloor 20s线性无限；
溢出：隐藏；
}
@关键帧移动地板{
0%{左边距：1000px；}
100%{左边距：-1000px；}
}
@关键帧漫游{
从{背景位置：0px；}
至{背景位置：-500px；}
}
.x1{
-webkit动画：移动云15秒线性无限；
-moz动画：moveclouds 15秒线性无限；
-o-动画：移动云15秒线性无限；
}
.x2{
左：200px；
-webkit变换：比例（0.6）；
-moz变换：比例（0.6）；
变换：比例（0.6）；
不透明度：0.6；/*不透明度与大小成比例*/
-webkit动画：moveclouds 25s线性无限；
-moz动画：moveclouds 25s线性无限；
-o-动画：移动云25s线性无限；
}
.x3{
左：252px；
顶部：-200px；
-webkit变换：比例（0.8）；
-moz变换：比例（0.8）；
变换：比例（0.8）；
不透明度：0.8；/*不透明度与大小成比例*/
-webkit动画：moveclouds 20s线性无限；
-moz动画：moveclouds 20s线性无限；
-o-动画：20秒线性无限；
}
@-webkit关键帧移动云{
0%{左边距：1000px；}
100%{左边距：-1000px；}
}
@-moz关键帧移动云{
0%{左边距：1000px；}
100%{左边距：-1000px；}
}
@-o关键帧移动云{
0%{左边距：1000px；}
100%{左边距：-1000px；}
}

---

添加

溢出：隐藏到id“云”


地板示例
向
云添加
溢出：隐藏
：


正文{
字体系列：“Candal”，无衬线；
溢出：隐藏；
背景色：黑色；
/*删除这行，这是为了证明云是不可见的^^^*/
}
.集装箱{
宽度：50%；
保证金：0自动；
文本对齐：居中；
}
#云彩{
填充：100px0；
背景:3598dc ;；
背景：-webkit线性梯度（顶部，3598DC0%，#fff 100%）；
背景：-线性梯度（顶部，3598DC0%，#fff 100%）；
背景：-莫兹线性梯度（顶部，3598dc0%，#fff 100%）；
溢出：隐藏；
/*添加此行^^^*/
}
.云{
宽度：200px；高度：60px；
背景：#fff；
边界半径：200px；
-moz边界半径：200px；
-webkit边界半径：200px；
位置：相对位置；
}
.cloud:之前，.cloud:之后{
内容：''；
位置：绝对位置；
背景：#fff；
宽度：100px；高度：80px；
位置：绝对；顶部：-15px；左侧：10px；
边界半径：100px；
-moz边界半径：100px；
-webkit边界半径：100px；
-webkit变换：旋转（30度）；
变换：旋转（30度）；
-moz变换：旋转（30度）；
}
.云：之后{
宽度：120px；高度：120px；
顶部：-55px；左侧：自动；右侧：15px；
}
#性格{
利润上限：-120px；
背景：url(http://i.imgur.com/Zjsbcni.png);
宽度：84px；
高度：126px；
动画：行走1.0步（6）无限；
左边距：425px；
}
#地板{
高度：39px；
背景图片：url(http://i.imgur.com/usFekrp.png);
动画：movefloor 20s线性无限；
溢出：隐藏；
}
@关键帧移动地板{
0%{左边距：1000px；}
100%{左边距：-1000px；}
}
@关键帧漫游{
从{背景位置：0px；}
至{背景位置：-500px；}
}
.x1{
-webkit动画：移动云15秒线性无限；
-moz动画：moveclouds 15秒线性无限；
-o-动画：移动云15秒线性无限；
}
/*云的速度、不透明度和位置可变，以获得逼真的效果*/
.x2{
左：200px；
-webkit变换：比例（0.6）；
-moz变换：比例（0.6）；
变换：比例（0.6）；
不透明度：0.6；/*不透明度与大小成比例*/
/*速度也将与大小和不透明度成比例*/
/*速度越快，时间越短，单位为秒*/
-webkit动画：moveclouds 25s线性无限；
-moz动画：moveclouds 25s线性无限；
-o-动画：移动云25s线性无限；
}
.x3{
左：252px；
顶部：-200px；
-webkit变换：比例（0.8）；
-moz变换：比例（0.8）；
变换：比例（0.8）；
不透明度：0.8；/*不透明度与大小成比例*/
-webkit动画：moveclouds 20s线性无限；
-moz动画：moveclouds 20s线性无限；
-o动画：移动云20s线性inf
   #clouds{
      overflow: hidden;
    }

#clouds {
  padding: 100px 0;
  background: #3598dc;
  background: -webkit-linear-gradient(top, #3598dc 0%, #fff 100%);
  background: -linear-gradient(top, #3598dc 0%, #fff 100%);
  background: -moz-linear-gradient(top, #3598dc 0%, #fff 100%);
overflow: hidden;
}

body {
  font-family: 'Candal', sans-serif;
  overflow-x: hidden;
}

 .container {           
  margin: 0 auto;
  overflow: hidden;
  text-align: center;
  width: 50%;
}

#clouds {           
  background: #3598dc;
  background: -webkit-linear-gradient(top, #3598dc 0%, #fff 100%);
  background: -linear-gradient(top, #3598dc 0%, #fff 100%);
  background: -moz-linear-gradient(top, #3598dc 0%, #fff 100%);
  overflow: hidden;
  padding: 100px 0;      
}

#character{
  animation: walk 1.0s steps(6) infinite;
  background:url(http://i.imgur.com/Zjsbcni.png);      
  height: 126px;  
  margin-left: 320px;
  margin-top: -120px;
  width: 84px;
}