SVG animation, or how to make a smooth transition?

Question

css

Good afternoon.
The question is how to make a smooth transition or why in my example the transition does not occur smoothly.
At one time there was already an answer Animation SVG, how to make smoothness?
Did as there + tried with @keyframes all in vain.
Below is my example.

<svg viewBox="0 0 100.7 229.7">
    <path class="st0" d="M41,12h21c0,0-13,25-12,60s13.7,43.5,14,72c0.4,40.7-12.5,76.5-12.5,76.5s7.1-33.7,2.3-75.1C50.7,117.7,37,105,35,71S41,12,41,12z">
      <animate 
      attributeName="d"
      from="M41,12h21c0,0-13,25-12,60s13.7,43.5,14,72c0.4,40.7-12.5,76.5-12.5,76.5s7.1-33.7,2.3-75.1C50.7,117.7,37,105,35,71S41,12,41,12z"
      to="M57.7,12h-21c0,0,13,25,12,60s-13.7,43.5-14,72c-0.4,40.7,12.5,76.5,12.5,76.5s-7.1-33.7-2.3-75.1C48,117.7,61.7,105,63.7,71C65.7,37,57.7,12,57.7,12z" 
      begin="mouseover" 
      end="mouseout"
      dur="3s" 
      />
    </path>
    </svg>

Answer 1

You need to change the path, that is, exactly how your shape will change, now it is displayed horizontally, the duration (dur) does not play a role here.

Answer 2

From Habr:
For morphing to work, the number of commands must match, and they must be of the same type. If you ignore this condition, then there will be no interpolation - the animation will jump from one state to another.