easing in svg animate doesn't work

Question

I tried to add keySplines, values, keyTimes attributes to animate element to simulate easing animation. Easing effect doesn't work.

jsfiddle

HTML

<svg xmlns="http://www.w3.org/2000/svg" id="arrow-slider-1" viewBox="0 0 766 22" width="766" height="22" fill="black" stroke="black">
   <path d="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z">
      <animate class="triangle-animation" attributeType="XML" attributeName="d" from="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z" to="M765,22L765,15L505.00002429484215,15L490.00002429484215,0L475.00002429484215,15L0.5,15L0.5,21.5" dur="4s" repeatCount="1" fill="freeze" keySplines=" 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1; 0.1 0.8 0.2 1" keyTimes="0;0.22;0.33;0.55;0.66;0.88;1" calcMode="spline" begin="indefinite"></animate>
   </path>
</svg>

<button id="btn">Click me</button>

JS

document.getElementById("btn").onclick = function(e) {
    console.log('anim');
  document.querySelector('.triangle-animation').beginElement();
}

Answer 1

1. If you use keyTimes, you either must provide a values list with a matching number of semicolon-separated entries, or if you use from and to, keyTimes must be "0;1" and keySplines must contain only one entry.
2. The path definitions in the values list must structurally match, with only numbers differing. If one has a closing Z command, every value needs one. Exception: Optional command letters (for repetitions of the same command) can be used or left out.
3. Bonus: your example doesn't need javascript to start with a button click. Just set begin="btn.click".

<svg xmlns="http://www.w3.org/2000/svg" id="arrow-slider-1" viewBox="0 0 766 22" width="766" height="22" fill="black" stroke="black">
   <path d="M765 22 765 15 L39 15 L25 0 L11 15 L0.5 15 L0.5 21.5 Z">
      <animate class="triangle-animation" attributeType="XML" attributeName="d" values="
        M765 22 765 15 L39 15 L25 0  L11 15  L0.5 15 L0.5 21.5 Z;
        M765 22 765 15 239 15 225 0  211 15  L0.5 15 L0.5 21.5 Z;
        M765 22 765 15 505 15 L490 0 L475 15 L0.5 15 L0.5 21.5 Z"
        keySplines="0.1 0.8 0.2 1;0.1 0.8 0.2 1"
        keyTimes="0;0.5;1"
        dur="4s" repeatCount="1" fill="freeze" calcMode="spline" begin="btn.click"></animate>
   </path>
</svg>

<button id="btn">Click me</button>