duration="2s" does not work on animating a svg element

Question

I am trying to animate a svg element. It works when I set the duration to 1s and write keyTimes according to it. But when I span the duration to 2s it somehow breaks.

This is the code that works:

<rect id="Rectangle-8-Copy-4" fill="#D7E0E7" x="10" y="10" width="46" height="4">
    <animate attributeName="fill" begin="0s" dur="1s" keyTimes="0;0.50;1" repeatCount="indefinite" values="#D7E0E7;#879CAD;#EBF0F3"/>
</rect>

https://jsfiddle.net/s3958psq/1/

When I change the duration to two seconds it stops the animation:

<rect id="Rectangle-8-Copy-4" fill="#D7E0E7" x="10" y="10" width="46" height="4">
    <animate attributeName="fill" begin="0s" dur="2s" keyTimes="0;1;2" repeatCount="indefinite" values="#D7E0E7;#879CAD;#EBF0F3"/>
</rect>

https://jsfiddle.net/s3958psq/

I really would like to know what is going on here.

Answer 1

When you change the duration you must not change the keyTimes. They always go between 0 (the start) and 1 (the end).

Values outside the range 0..1 are invalid and cause the animation to be ignored.

<svg width="83px" height="114px" viewBox="0 0 83 114">
    <title>Group 23 Copy 3</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M41.5,1.99808051 C41.5,0.894571116 40.6135756,0 39.4919018,0 L4.15,0 C1.8592,0 0,1.824 0,4.07142857 L0,109.928571 C0,112.176 1.8592,114 4.15,114 L78.85,114 C81.1408,114 83,112.176 83,109.928571 L83,42.7110903 C83,41.6082856 82.1024789,40.7142857 80.9907068,40.7142857 L43.575,40.7142857 C42.427525,40.7142857 41.5,39.8043214 41.5,38.6785714 L41.5,1.99808051 Z M47.7922479,2.10168901 C46.6091171,0.940958221 45.65,1.34759596 45.65,2.99863879 L45.65,33.6442184 C45.65,35.3003208 47.0013718,36.6428571 48.6433707,36.6428571 L80.0066293,36.6428571 C81.6598223,36.6428571 82.0392027,35.7002505 80.8577521,34.5411681 L47.7922479,2.10168901 Z" id="path-1"></path>
        <mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="83" height="114" fill="white">
            <use xlink:href="#path-1"></use>
        </mask>
    </defs>
    <rect fill="#D7E0E7" x="10" y="10" width="46" height="4">
        <animate attributeName="fill" begin="0s" dur="2s" keyTimes="0;0.5;1" repeatCount="indefinite" values="#D7E0E7;#879CAD;#EBF0F3"/>
    </rect>
</svg>