html - CSS 动画适用于 Safari 和 Chrome，但不适用于 Firefox

Question

我尝试了多种“修复”来尝试修复动画，但无法弄清楚为什么行为与 chrome 和 safari 有如此大的不同。唯一似乎没有应用背面可见性，但将rotateY（0deg）应用于父级的常见修复并不能解决问题

.scene {
  margin-left: auto;
  margin-right: auto;
  margin-top: 10em;
  width: 10em;
  height: 10em;
  perspective: 800px;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-animation: spinning 12s linear infinite;
  animation: spinning 12s infinite;
  transform-style: preserve-3d;
  transform-origin: center;
}

@-webkit-keyframes spinning {
  0% {
    -webkit-transform: rotateY(0deg);
  }
  100% {
    -webkit-transform: rotateY(-360deg);
  }
}

@keyframes spinning {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}

.out-side {
  display: flex;
  width: 200%;
  height: 100%;
  position: absolute;
  line-height: 10em;
  text-align: center;
  -moz-backface-visibility: hidden;
}

.cover {
  height: 100%;
  width: 50%;
  border-style: solid;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  background-color: blue;
}

.back {
  transform: rotateY(-50deg);
  transform-origin: right;
  height: 100%;
  width: 50%;
  border-style: solid;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  background-color: blue;
}

.in-side {
  display: flex;
  width: 200%;
  height: 100%;
  position: absolute;
  line-height: 10em;
  text-align: center;
  -moz-backface-visibility: hidden;
}

.left {
  height: 100%;
  width: 50%;
  border-style: solid;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  background-color: red;
  transform: rotateY(-180deg) !important;
  transform-origin: right;
}

.right {
  transform: rotateY(-230deg) !important;
  transform-origin: left;
  height: 100%;
  width: 50%;
  border-style: solid;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  background-color: red;
}

<div class="scene">
  <div class="cube">

    <div class="out-side">
      <div class="back">back</div>
      <div class="cover">cover</div>
    </div>

    <div class="in-side">
      <div class="left">
        <img style="width:100%;height:auto;" src="https://www.sciencenewsforstudents.org/wp-content/uploads/2020/10/100220_CG_megalodon_feat-1028x579.jpg" />
      </div>
      <div class="right">
        <img style="width:100%;height:auto;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRpNBYv1lZ9MxxDR0qlqYm88RLm5ymSmf03dg&usqp=CAU" />
      </div>
    </div>

  </div>
</div>

标签： htmlcsscss-animations