SVG CSS Multiple animations

Question

I have created a treasure map animation, first, it will display the path in light grey but as animation begins I would like the light grey dashes to disappear or turn to a black color as the fill animation ".road" kicks in. I am struggling to get the light grey dashes ".steps" to disappear as the fill animations go over that position.

svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.road {
  stroke-dasharray: 744;
  stroke-dashoffset: -744;
  animation: draw-road 10s infinite;
}

.steps {
  stroke-dasharray: -744;
  stroke-dashoffset: 744;
  animation: draw-steps 10s reverse;
}

@keyframes draw-road {
  0% {
    stroke-dashoffset: 744;
    stroke: #000000;
  }
  100% {
    stroke-dashoffset: 0;
    stroke: #000000;
  }
}

@keyframes draw-steps {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
      <style>
        .st0{fill:none;stroke:#999;stroke-width:2;stroke-miterlimit:10}.st2{fill:#b3b3b3}
      </style>
      <g id="Layer_1">
        <path class="st0" d="M20.82 225.01c1.05-1.32 2.08-2.63 3.1-3.92"/>
        <path d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" fill="none" class="road" stroke="#999" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="10.1073,10.1073"/>
        <path class="st0" d="M20.82 225.01c1.05-1.32 2.08-2.63 3.1-3.92"/>
        <path d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" fill="none" stroke="#999" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="10.1073,10.1073" class="steps"/>
        <path class="st0" d="M273.84 65.49c1.64-.16 3.3-.32 4.98-.48"/>
        <path class="st2" d="M55.96 140.02l-3.27-4.42-4.42 3.27-1.79-2.41 4.42-3.27-3.27-4.42 2.41-1.79 3.27 4.42 4.42-3.27 1.79 2.41-4.42 3.27 3.27 4.42-2.41 1.79zM158 200.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM149 140.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM212 78.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34z"/>
      </g>
    </svg>

Answer 1

Solution using CSS

svg{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
} 

.road{
  fill:none;
  stroke:black;
  stroke-dasharray:10 10;
  stroke-dashoffset:0;
  stroke-width:2;
}
.steps{
   fill:none;
   stroke:#999;
  stroke-dasharray:10 10;
  stroke-dashoffset:0;
  stroke-width:2;
  mask:url(#msk1);
      }


#stepMask{
   fill:none;
   stroke:black;
   stroke-width:2;
   stroke-dashoffset: 744;
   stroke-dasharray:744,744;
   animation: draw-steps 10s linear infinite;
}
@keyframes draw-steps {
100% {stroke-dashoffset:0;}
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <style>
    .st0{fill:none;stroke:#999;stroke-width:2;stroke-miterlimit:10}.st2{fill:#b3b3b3}
  </style>
    <defs>
	   <mask id="msk1">
	      <rect width="100%" height="100%" fill="white" />
	     <path id="stepMask"  d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
			  
	   </mask>
	</defs>
  <g id="Layer_1">
     <path class="road" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
     <path class="steps"  d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
   <path class="st2" d="M55.96 140.02l-3.27-4.42-4.42 3.27-1.79-2.41 4.42-3.27-3.27-4.42 2.41-1.79 3.27 4.42 4.42-3.27 1.79 2.41-4.42 3.27 3.27 4.42-2.41 1.79zM158 200.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM149 140.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM212 78.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34z"/>
  </g>
</svg>

Solution using SVG mask.

• Below is a black line class="road"
• Above is a gray line class="steps"
• A mask is applied to the gray line which, when moving, erases the gray line showing the black line

This creates the effect of filling the gray line with black

svg{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  margin:auto;
} 

.road{
  fill:none;
  stroke:black;
  stroke-dasharray:10 10;
  stroke-dashoffset:0;
  stroke-width:2;
}
.steps{
   fill:none;
   stroke:#999;
  stroke-dasharray:10 10;
  stroke-dashoffset:0;
  stroke-width:2;
  animation: draw-steps 10s reverse;
  
}

#stepMask{
   fill:none;
   stroke:black;
   stroke-width:2;
   stroke-dashoffset: 744;
   stroke-dasharray:744,744;
 
  
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">
  <style>
    .st0{fill:none;stroke:#999;stroke-width:2;stroke-miterlimit:10}.st2{fill:#b3b3b3}
  </style>
    <defs>
	   <mask id="msk1">
	      <rect width="100%" height="100%" fill="white" />
	     <path id="stepMask"  d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" >
		   <animate attributeName="stroke-dashoffset" begin="0s" dur="20s" values="744;0;744" repeatCount="indefinite"/> 
		  </path> 
	   </mask>
	</defs>
  <g id="Layer_1">
   
   <path class="road" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
  
   <path class="steps" mask="url(#msk1)" d="M30.16 213.14c47.85-61.32 61-85.9 56.16-90.62-7.14-6.97-60.04 22.79-57 46 2.94 22.48 115.32-.75 124 27 3.14 10.05-9.18 19.09-5 25 8.54 12.09 73.6-6.39 76-30 3.26-32.1-111.39-53.93-109-82 1.2-14.1 32-30.41 153.49-42.53" />
   
  <path class="st2" d="M55.96 140.02l-3.27-4.42-4.42 3.27-1.79-2.41 4.42-3.27-3.27-4.42 2.41-1.79 3.27 4.42 4.42-3.27 1.79 2.41-4.42 3.27 3.27 4.42-2.41 1.79zM158 200.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM149 140.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34zM212 78.86l-4.29-3.44-3.44 4.29-2.34-1.88 3.44-4.29-4.29-3.44 1.88-2.34 4.29 3.44 3.44-4.29 2.34 1.88-3.44 4.29 4.29 3.44-1.88 2.34z"/>
  </g>
</svg>