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

Question

我正在尝试生成 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 不透明度应用到 1 100%。我做了很多研究，但我无法解决这个问题。我需要它在 chrome 中呈现，就像在 Mozilla 中呈现一样。

有人可以帮忙吗。

提前致谢。

Answer 1

将您对 opacity 的引用替换为 fill-opacity 并且它有效。如果你发现你也需要的话，你也可以使用 stroke-opacity。

Answer 2

@MSC 非常感谢您提供此答案。我整天挠头解决这个问题。我在这里发布完整的代码用于文档目的和我自己的未来参考，按照您的建议在 chrome 中解决它的方式。

CSS部分

                .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 {
                      fill-opacity:0;
                      stroke-opacity:0;
                      animation: a3 1s 4s linear forwards,a31 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% {stroke-opacity:0;}
                    100%{stroke-opacity:1;}
                       } 

                   @keyframes a31 {
                    0% {fill-opacity:0;}
                    100%{fill-opacity:1;}
                       }

                    @keyframes a4 {
                    0% {
                        transform: translateY(0);
                       }

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

SVG 部分

                <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" style="stroke-opacity:0">
                        <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>

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

CSS opacity does not apply in chrome but applies in firefox

css

svg

keyframe

css-animations