SVG stroke animation color render correct in Firefox but fail in Chrome

Question

When the animation ended, the color of the stroke should change to black

        100% {
            stroke: black;

It did correctly in Firefox but not in Chrome

codepen: https://codepen.io/sendmead/pen/MWpzRjK

Here is part of the svg code:

        @keyframes keyframes12 {
          from {
            stroke: blue;
            stroke-dashoffset: 482;
            stroke-width: 128;
          }
          61% {
            animation-timing-function: step-end;
            stroke: blue;
            stroke-dashoffset: 0;
            stroke-width: 128;
          }
          100% {
            stroke: black;
            stroke-width: 1024;
          }
        }
        #char-animation-12 {
          animation: keyframes12 0.6422526041666666s both;
          animation-delay: 8.892740885416666s;
          animation-timing-function: linear;
        }

Answer 1

You seem to be triggering a Chrome bug by putting an animation-timing-function declaration inside a keyframe (which I don't think is legal and haven't seen before). If you get rid of the step-end and add another keyframe so that it mimics a step-end, everything works at least in this minimal test case. I also reduced the decimal places in the timings - too many digits sometimes triggers bug in other places where the browser guys haven't sanitized their inputs, so it doesn't hurt to get rid of the extra digits.

(Also please post a complete minimal test case on SO. Links rot)

<svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  <g stroke="white" stroke-dasharray="1,1" stroke-width="0" transform="scale(4, 4)">
    <line x1="0" y1="0" x2="256" y2="256"></line>
    <line x1="256" y1="0" x2="0" y2="256"></line>
    <line x1="128" y1="0" x2="128" y2="256"></line>
    <line x1="0" y1="128" x2="256" y2="128"></line>
  </g>
  <g transform="scale(1, -1) translate(0, -768)">
    <style type="text/css">      
        @keyframes keyframes12 {
          0% {
            stroke: blue;
            stroke-dashoffset: 482;
            stroke-width: 128;
          }
          61% {
            stroke: blue;
            stroke-dashoffset: 0;
            stroke-width: 128;
          }
          
          99% {
            stroke: blue;
            stroke-dashoffset: 0;
            stroke-width: 128;
          }
          
          100% {
            stroke: black;
            stroke-dashoffset: 0;
            stroke-width: 1024;
          }
        }
      
        #char-animation-12 {
          animation: keyframes12 0.64s both;
          animation-delay: 8.8s;
          animation-timing-function: linear;
        }
      
    </style>
    
      <path d="M 746 40 L 779 4 Q 800 -17 817 -43 Q 834 -70 849 -89 L 874 -120 Q 892 -138 904 -136 Q 916 -136 924 -124 Q 932 -113 930 -92 Q 926 -35 852 9 L 804 35 Q 779 47 771 49 L 756 54 Q 742 57 742 50 Q 740 47 746 40 Z" fill="lightgray"></path>

      <clipPath id="char-clip-12">
        <path d="M 746 40 L 779 4 Q 800 -17 817 -43 Q 834 -70 849 -89 L 874 -120 Q 892 -138 904 -136 Q 916 -136 924 -124 Q 932 -113 930 -92 Q 926 -35 852 9 L 804 35 Q 779 47 771 49 L 756 54 Q 742 57 742 50 Q 740 47 746 40 Z"></path>
      </clipPath>
      <path clip-path="url(#char-clip-12)" d="M 750 48 L 844 -23 L 881 -66 L 904 -112" fill="none" id="char-animation-12" stroke-dasharray="354 708" stroke-linecap="round"></path>
    
  </g>
</svg>