How to animate cloud icon in a SVG image

I am new to svg animation.
I am trying to animate the clouds which is there in the svg image. But its not working as expected I want all the cloud should from their position and start moving to the end of the image and repeats continuously but its not happening.

Here is my JSFIDDLE

Code I used to animate:

<animateTransform attributeName="transform" from="1100" to="0" type="translate" begin="5s" dur="18s" repeatCount="indefinite" />

Solution

Your code seems to be working fine.

However, if you want the animation to start immediately, you should specify a negative begin attribute. Also, the from and to coordinates are both within the viewBox range, so instead of sliding off the left side of the picture and back in at the right side (which is what I assume you want), the clouds are suddenly teleporting across the picture when they get close to the left side.

EDIT: I just spotted another problem — you're supposed to provide two values for translate attributes. You only provided one, which is why all the clouds are sitting on the same horizontal line.

Changing the attributes as follows should fix these issues (assuming you want a Y coordinate of 123):

<animateTransform
    attributeName="transform"
    from="1700 123"
    to="-500"
    type="translate"
    begin="-5s"
    dur="18s"
    repeatCount="indefinite"
/>

Here's an updated jsfiddle link

P.S: Next time you have a problem like this, start by making a minimal, complete and verifiable example, and post it here using the snippet editor. You'll be much more likely to get help that way.