svg rect height animation

Question

I have created a svg bar animation, but this motion is not looking similar like this , I know this can done with CSS3 animation. Here I need it with pure SVG code. How can I achieve with it?

Working Demo

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">

<rect fill="#fff" width="3" height="100" transform="translate(0) rotate(180 3 50)">
  <animate
      attributeName="height"
      attributeType="XML"
      dur="1s"
      from="30"
      to="100"
      repeatCount="indefinite"/>
</rect>
</svg>

Answer 1

Use values rather than from/to so that you can animate in both directions. I.e.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">

<rect fill="#fff" width="3" height="100" transform="translate(0) rotate(180 3 50)">
  <animate
      attributeName="height"
      attributeType="XML"
      dur="1s"
      values="30;100;30"
      repeatCount="indefinite"/>
</rect>
</svg>

Demo