html - 变换 rotateZ 发生在动画之后

Question

出于某种原因，我的 rotateZ 发生在动画之后，现在我正处于制作打开手牌的早期阶段。手指应该只从 rotateX 改变，使它看起来像它正在做的实际手打开，但 rotateZ 再次只发生在动画之后。

您可以在此处(或在 JSFiddle 中)查看它:

.zombie {
  position: relative;
  margin-left: 10%;
}

.zombie .hand {
  border-radius: 35%;
  border-bottom-left-radius: 20%;
  border-bottom-right-radius: 20%;
  background-color: #005700;
  width: 100px;
  height: 100px;
}

.one {
  position: absolute;
  background-color: #005700;
  border: 1px solid black;
  width: 60px;
  height: 20px;
  left: -2.4%;
  bottom: 30%;
  border-top-left-radius: 30%;
  border-bottom-left-radius: 30%;
  border-radius: 41%;
  transform: rotateZ(20deg);
  animation-name: zombie;
  animation-duration: 5s;
  animation-iteration-count: 1;
  z-index: -1;
}

@keyframes zombie {
  0% {
    transform: rotateY(90deg);
  }
  50% {
    transform: rotateY(0deg);
  }
}

<div class="grass"></div>
<div class="zombie">
  <div class="finger one"></div>
  <div class="finger two"></div>
  <div class="finger three"></div>
  <div class="finger four"></div>
  <div class="hand"></div>
</div>

Answer 1

如果你想保持rotateZ(20deg)，试试下面的方法:

@keyframes zombie{
    0% {
        transform: rotateZ(20deg) rotateY(90deg);
    }
    50% {
        transform: rotateZ(20deg) rotateY(0deg);
    }
}