变换rotateZ在动画之后发生

Question

出于某种原因，我的rotateZ正在动画之后发生，现在我正处于打开一只手的早期阶段。手指应该只从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);
    }
}