变换旋转Z在动画之后发生

Question

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

你可以在这里（或在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);
    }
}