How to animate an SVG's paths fill-opacity property?

Question

I have the following Gauge component:

The component is also rendering here: https://codesandbox.io/s/react-example-e3nxg

The component takes the prop rating as a number.

What I'd love to learn how to do is animate the path's opacity values. For example, if the prop for rating is passed a value of 5 ... How to make it so the component animates in each path, one at a time on a set time-delay between each path.

Any ideas on how this could be done?

Answer 1

Please checkout the sandbox url Sandbox link

I made a little change in the css

  #gauge {
  fill: red;
}

.Animate-Draw {
  fill-opacity: 0;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-name: FillIn;
  animation-duration: 4s 0.5s;
  /* animation-delay: .5s; */
}
.Animate-Draw:nth-child(1) {
  animation-delay: 0.5s;
}
.Animate-Draw:nth-child(2) {
  animation-delay: 1s;
}
.Animate-Draw:nth-child(3) {
  animation-delay: 1.5s;
}
.Animate-Draw:nth-child(4) {
  animation-delay: 2s;
}
.Animate-Draw:nth-child(5) {
  animation-delay: 2.5s;
}
.Animate-Draw:nth-child(6) {
  animation-delay: 3s;
}
.Animate-Draw:nth-child(7) {
  animation-delay: 3.5s;
}
.Animate-Draw:nth-child(8) {
  animation-delay: 4s;
}

@keyframes FillIn {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}

I hope this is what you are looking for.