CSS 动画和 z-index

Question

我正在开发一款类似于“2048”的 JavaScript 游戏。它有一个由几层 div 组成的“图块”表格显示。我想使用 CSS 动画使选定的图块“弹跳”。（弹跳需要能够在四个主要方向中的每一个方向上发生：向上、向下、向左或向右弹跳，具体取决于游戏的状态。）

我的问题是，当我附加动画时，我看到内容正确地弹跳到所选动画块的“前面”和左侧，但它错误地弹跳到其右侧和下方的图块“后面” .这是一个说明问题的 JSFiddle：

https://jsfiddle.net/atqwc8er/2/

我希望弹跳的蓝色方块“2”出现在方块“3”前面，就像它已经出现在方块“1”前面一样。谁能帮我做到这一点？

.tile {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
}

.tile-inner {
  text-align: center;
  z-index: 10;
}

.tile-1-0 {
  transform: translate(0px, 0px);
}

.tile-1-1 {
  transform: translate(55px, 0px);
}

.tile-1-2 {
  transform: translate(110px, 0px);
}

.selected .tile-inner {
  background-color: blue;
  animation: back-and-forth 0.5s infinite alternate;
  z-index: 99; /* not working */
}

@keyframes back-and-forth {
  from {
    transform: translateX(-25px);
  }
  to {
    transform: translateX(25px);
  }
}

<div class="tile-container">
  <div class="tile tile-1-0">
    <div class="tile-inner">1</div>
  </div>
  <div class="tile tile-1-1 selected">
    <div class="tile-inner">2</div>
  </div>
  <div class="tile tile-1-2">
    <div class="tile-inner">3</div>
  </div>
</div>

Answer 1

改为增加 .selected 的 z-index

.tile {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
}

.tile-inner {
  text-align: center;
  z-index: 10;
}

.tile-1-0 {
  transform: translate(0px, 0px);
}

.tile-1-1 {
  transform: translate(55px, 0px);
}

.tile-1-2 {
  transform: translate(110px, 0px);
}

.selected .tile-inner {
  background-color: blue;
  animation: back-and-forth 0.5s infinite alternate;
}
.selected {
  z-index: 99;
}

@keyframes back-and-forth {
  from {
    transform: translateX(-25px);
  }
  to {
    transform: translateX(25px);
  }
}

<div class="tile-container">
  <div class="tile tile-1-0">
    <div class="tile-inner">1</div>
  </div>
  <div class="tile tile-1-1 selected">
    <div class="tile-inner">2</div>
  </div>
  <div class="tile tile-1-2">
    <div class="tile-inner">3</div>
  </div>
</div>

相关问题以获取更多详细信息并了解为什么它不能与 .title-inner 一起使用：

Answer 2

同级元素需要添加z-index属性，请将z-index属性添加到.title-1-1而不是.title-inner

CSS 动画和 z-index

CSS animations and z-index

css

z-index

css-animations