SVG animate. Fill path after drawn

I have created an svg file where the outlines get "drawn" when the page loads. After the animation is done I want to fill in the outlines.

So this is what I have done.

There are multiple paths. Here is one:

<path id="b1" class="b1" d="M95.4,204.9a31.7,31.7,0,0,1,23,9.6,32.8,32.8,0,0,1,6.9,10.8,38.7,38.7,0,0,1,0,27.4,32.8,32.8,0,0,1-6.9,10.8,31.7,31.7,0,0,1-23,9.6,25.7,25.7,0,0,1-11.9-2.6,25.4,25.4,0,0,1-8.3-6.8v7.7H61V174H75.1v40.3a25.4,25.4,0,0,1,8.3-6.8A25.7,25.7,0,0,1,95.4,204.9Zm-1.7,13.3a19.5,19.5,0,0,0-8,1.6,18.5,18.5,0,0,0-6.1,4.4,19.7,19.7,0,0,0-4,6.6,24.6,24.6,0,0,0,0,16.5,19.7,19.7,0,0,0,4,6.6,18.5,18.5,0,0,0,6.1,4.4,20.9,20.9,0,0,0,16.1-.1,18.1,18.1,0,0,0,6.1-4.5,19.7,19.7,0,0,0,3.9-6.6,24.6,24.6,0,0,0,0-16.1,19.8,19.8,0,0,0-3.9-6.6,18.1,18.1,0,0,0-6.1-4.5A19.6,19.6,0,0,0,93.7,218.2Z" transform="translate(-60.5 -173.5)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10"/>

This is the css for the animation of the outlines:

@keyframes offset{
    to {
        stroke-dashoffset: 0;   
    }   
}

.b1{
    animation: offset 2s linear forwards;
    stroke-dasharray: 324.774;
    stroke-dashoffset: 324.774; 
}

Up until here everything works just fine.
After two seconds the animation is done and now I want to fill it.
This is how I tought I might do it:

@keyframes fill {
    0% {
       fill: white;
       }
    100% {
       fill: black;
       }
      }

      #fill {
          animation-name: fill;
          animation-duration: 2s;
          animation-delay:2s;
      }

The problem is that I allready have an id and a class assigned to the path
I tried to change the path's id with the #fill.

If I do this the outline animation get's overwritten and it just waits two seconds . After the two seconds the path get's filled by animation.

How can I make this work? What I want is to first animate the outlines and when they are done the shape must be filled.

Thnx.

You can have as many keyframes as you like in an animation. Just animate the path between 0% and 50%, and then animate the fill between 50% and 100%.

Here you go:

.b1 {
  animation: stroke_fill 4s linear forwards;
  stroke-dasharray: 324.774;
  stroke-dashoffset: 324.774;
}
@keyframes stroke_fill {
  0% {
    fill: white;
  }
  50% {
    fill: white;
    stroke-dashoffset: 0;
  }
  100% {
    fill: black;
    stroke-dashoffset: 0;
  }
}

<svg width="300" height="300" viewBox="0 0 300 300">
  <path id="b1" class="b1" d="M95.4,204.9a31.7,31.7,0,0,1,23,9.6,32.8,32.8,0,0,1,6.9,10.8,38.7,38.7,0,0,1,0,27.4,32.8,32.8,0,0,1-6.9,10.8,31.7,31.7,0,0,1-23,9.6,25.7,25.7,0,0,1-11.9-2.6,25.4,25.4,0,0,1-8.3-6.8v7.7H61V174H75.1v40.3a25.4,25.4,0,0,1,8.3-6.8A25.7,25.7,0,0,1,95.4,204.9Zm-1.7,13.3a19.5,19.5,0,0,0-8,1.6,18.5,18.5,0,0,0-6.1,4.4,19.7,19.7,0,0,0-4,6.6,24.6,24.6,0,0,0,0,16.5,19.7,19.7,0,0,0,4,6.6,18.5,18.5,0,0,0,6.1,4.4,20.9,20.9,0,0,0,16.1-.1,18.1,18.1,0,0,0,6.1-4.5,19.7,19.7,0,0,0,3.9-6.6,24.6,24.6,0,0,0,0-16.1,19.8,19.8,0,0,0-3.9-6.6,18.1,18.1,0,0,0-6.1-4.5A19.6,19.6,0,0,0,93.7,218.2Z"
  transform="translate(-60.5 -173.5)" fill="none" stroke="#1d1d1b" stroke-miterlimit="10" />
</svg>