CSS不透明度不适用于chrome，但适用于firefox

debugcn 发表于 Dev

smpa01

我正在尝试生成CSS动画SVG。以下是我的代码

.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>

当我在Mozilla上打开它时，其行为与Chrome有所不同。Mozilla正在按预期方式应用所有关键帧，而Chrome并未将关键帧a3不透明度应用于100％的1。我做了很多研究，但无法解决。我需要它来像在Mozilla中渲染一样在chrome中渲染。

有人可以帮忙吗？

先感谢您。

MSC

用fill-opacity替换对不透明度的引用，它可以工作。如果发现您也需要笔触不透明度，也可以使用它。