SVG动画-从右向左移动线

Question

我只是从SVG动画开始，我正在尝试制作动画线以模仿云运动。这些线应保持相同的测量值，并从左向右移动。但是我不确定关键帧的外观。 任何帮助将不胜感激！

这是我的小提琴：https://jsfiddle.net/Tabs89/tjp3zL9c/33/

.movingClouds {
  animation-name: clouding;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-webkit-keyframes clouding {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}

<svg class="movingClouds">
  <line x1="30" y1="10" x2="130" y2="10" style="stroke:rgb(255,255,255);stroke-width:2.5" />
  </svg>
  
  <svg "movingClouds" height="210" width="100">
  <line x1="0" y1="40" x2="200" y2="40" style="stroke:rgb(255,255,255);stroke-width:2" />
  </svg>