How to set the animation order of an element?

Question

css

Others tell me how to set the order of animation execution. That is, there is a letter, it is first outlined (animation 1), and then it should be filled with color (animation 2), and so, I made a stroke, but how to add a fill now to this same element? It's all in the svg file.

<style>
                .stroke {
                    stroke-dasharray: 600;
                    stroke-dashoffset: 100;
                    animation: dash 15s linear alternate;
                    animation: dash 15s infinite;
                    animation-delay: 1s;
  
                    }
                
                @-webkit-keyframes dash {
                
                  0% {stroke-dashoffset: 0;}
                 50% {stroke-dashoffset:600;}
                100% {stroke-dashoffset: 0;}
                
            </style>

Answer 1

Change 50% and 100% to 25% and 50% respectively, and add more lines with the percentage level and your styles.
Something like this:
0% {stroke-dashoffset: 0;}
25% {stroke-dashoffset:600;}
50% {stroke-dashoffset: 0; color: #ffff;}
100% {color: #000;}