CSS opacity does not apply in chrome but applies in firefox

Question

I am trying to generate a CSS animated SVG. Following is my code

.body {
  animation: a1 3s 1s linear forwards;
  transform-origin: center bottom;
  stroke: rgb(192, 31, 31);
  fill: #FD625E;
  transform: scaleY(0);
  stroke-width: 2px;
}

.head {
  stroke: rgb(192, 31, 31);
  animation: a2 4s linear forwards;
}

.logo1 {
  opacity: 0;
  animation: a3 1s 4s linear forwards, a4 4s 5.5s infinite cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@keyframes a1 {
  0% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes a2 {
  0% {
    fill: white;
  }
  95% {
    fill: white;
  }
  100% {
    fill: #374649;
  }
}

@keyframes a3 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes a4 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-560px);
    opacity: 0;
  }
}

<svg id="background" xmlns="http://www.w3.org/2000/svg" width="1008.86" height="714.62" viewBox="0 0 1008.86 714.62">
    <g id="body">
    <rect class="body" x="294.99" y="639.57" width="56.85" height="74.55" fill="#fff"/>
    <path d="M536.85,641.07v73.55H481V641.07h55.85m1-1H480v75.55h57.85V640.07Z" transform="translate(-185.51 -1)"/>
  </g>

  <g id="head">
    <rect class="head" x="309.05" y="628.88" width="28.73" height="9.03" fill="#fff"/>
    <path d="M522.79,630.37v8H495.06v-8h27.73m1-1H494.06v10h29.73v-10Z" transform="translate(-185.51 -1)"/>
 </g>


  <g class="logo1" id="logo3" stroke="#000">
    <path d="M500.73,622.57h0A1.22,1.22,0,0,1,502,623.7v3.78a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14V623.7A1.22,1.22,0,0,1,500.73,622.57Z" transform="translate(-185.51 -1)" fill="#212121"/>
    <path d="M505.05,618h0a1.22,1.22,0,0,1,1.29,1.13v8.32a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14v-8.32A1.22,1.22,0,0,1,505.05,618Z" transform="translate(-185.51 -1)" fill="#212121"/>
    <path d="M509.37,620.3h0a1.22,1.22,0,0,1,1.29,1.13v6.05a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14v-6.05A1.22,1.22,0,0,1,509.37,620.3Z" transform="translate(-185.51 -1)" fill="#212121"/>
    <path d="M513.69,615h0a1.22,1.22,0,0,1,1.29,1.13v11.35a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14V616.13A1.23,1.23,0,0,1,513.69,615Z" transform="translate(-185.51 -1)" fill="#212121"/>
    <path d="M500.73,622.57h0A1.22,1.22,0,0,1,502,623.7v3.78a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14V623.7A1.22,1.22,0,0,1,500.73,622.57Z" transform="translate(-185.51 -1)" fill="#212121"/>
    <path d="M505.05,618h0a1.22,1.22,0,0,1,1.29,1.13v8.32a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14v-8.32A1.22,1.22,0,0,1,505.05,618Z" transform="translate(-185.51 -1)" fill="#212121"/>
    <path d="M509.37,620.3h0a1.22,1.22,0,0,1,1.29,1.13v6.05a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14v-6.05A1.22,1.22,0,0,1,509.37,620.3Z" transform="translate(-185.51 -1)" fill="#212121"/>
    <path d="M513.69,615h0a1.22,1.22,0,0,1,1.29,1.13v11.35a1.22,1.22,0,0,1-1.29,1.14h0a1.23,1.23,0,0,1-1.3-1.14V616.13A1.23,1.23,0,0,1,513.69,615Z" transform="translate(-185.51 -1)" fill="#212121"/>
  </g>

</svg>

When I open it on Mozilla it behaves differently than Chrome. Mozilla is applying all the keyframes as it is supposed to whereas Chrome does not apply keyframe a3 opacity to 1 at 100%. I did a lot of research but I can't fix this. I need this to render in chrome like it renders in Mozilla.

Can someone please help.

Thank you in advance.

Answer 1

Replace your references to opacity with fill-opacity and it works. You can also use stroke-opacity if find you need that too.