CSS动画opacity导致背景图片消失问题求助

开发配对游戏时，Tile通过3D旋转展示背面图片，原本功能正常。添加包含opacity属性的关键帧动画后，Tile的背景图片直接消失——即使关键帧中opacity设为1也无效；移除opacity属性后恢复正常。已在Firefox和Edge（目标浏览器）测试，问题一致。

复现代码 #

CSS代码 #

@keyframes tileComplete {
  0% {
    transform: rotate3d(0, 1, 0, 0deg);
  }
  50% {
    transform: rotate3d(0, 1, 0, 180deg) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate3d(1, 1, 0, 540deg) scale(3);
    opacity: 0;
  }
}

div.tiles {
  transform-style: preserve-3d;
  transform-origin: center;
  perspective: 800px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

div.tiles div.tile {
  transform-style: preserve-3d;
  transform-origin: center;
  width: 150px;
  height: 150px;
  margin: 5px;
  background-color: #000066;
  transition-property: opacity;
  transition-duration: 1s;
  opacity: 1;
  transform: rotate3d(0, 1, 0, 0deg);
  position: relative;
  cursor: pointer;
}

div.tiles div.tile div.tile-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("images/test.jpg");
  background-position: center;
  background-size: cover;
  transform: rotate3d(0, 1, 0, 180deg);
  z-index: 5;
  -webkit-backface-visibility: hidden;
}

div.tiles div.complete {
  animation-delay: 1s;
  animation-name: tileComplete;
  animation-duration: 2s;
  animation-delay: 0s;
  pointer-events: none;
}

HTML代码 #

<!doctype html>
<div>
  <div class="tiles">
    <div id="tile_0" class="tile complete">
      <div class="tile-image" style="background-image: url(images/memory_game/1.jpg);"></div>
    </div>
  </div>
</div>

问题原因 #

opacity属性会创建新的堆叠上下文，同时强制扁平化子元素的3D变换。当给父元素（.tile.complete）添加含opacity的动画时，子元素（.tile-image）的backface-visibility:hidden效果会失效，3D旋转的渲染逻辑被破坏，导致背景图无法正确显示。

解决方案 #

方案一：替换opacity为visibility/scale实现消失效果 #

避免在父元素动画中使用opacity，改用visibility或transform: scale(0)实现最终消失的效果，不干扰3D渲染：

@keyframes tileComplete {
  0% {
    transform: rotate3d(0, 1, 0, 0deg);
    visibility: visible;
  }
  50% {
    transform: rotate3d(0, 1, 0, 180deg) scale(1);
    visibility: visible;
  }
  100% {
    transform: rotate3d(1, 1, 0, 540deg) scale(3);
    visibility: hidden;
    /* 也可以用 transform: rotate3d(1,1,0,540deg) scale(0); 实现缩放消失 */
  }
}

方案二：分离旋转动画与透明度动画 #

将3D旋转动画保留在父元素，把opacity动画移到子元素（.tile-image）上，避免堆叠上下文影响3D变换：

@keyframes tileComplete {
  0% {
    transform: rotate3d(0, 1, 0, 0deg);
  }
  50% {
    transform: rotate3d(0, 1, 0, 180deg) scale(1);
  }
  100% {
    transform: rotate3d(1, 1, 0, 540deg) scale(3);
  }
}

@keyframes tileImageFade {
  0%, 50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

div.tiles div.complete {
  animation-name: tileComplete;
  animation-duration: 2s;
  pointer-events: none;
}

div.tiles div.complete .tile-image {
  animation-name: tileImageFade;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

内容的提问来源于stack exchange，提问作者Darren Crabb