Currently, the rotation on the Z-axis is occurring after the animation, even though I am still in the early stages of creating an animated hand opening. The intention is for the fingers to only rotate on the X-axis to simulate a realistic hand opening motion, which it is achieving. However, the Z-axis rotation occurs after the animation has finished.
To see the code and animation in action, you can visit this JSFiddle link.
.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>