Abnormal CSS3 Animation Behaviour - html

Question

I am trying to learn CSS3 by making a simple image slider using animations.
I have successfully achieved the animation pattern to my needs by doing some calculation but the problem is the subsequent images are not following the same rule which is a totally strange behaviour because all I did was change the %age steps for other images as the animation pattern is absolutely same for all of them. But due some unknown reasons, other images are not following as expected and I don't see any logical reason. May be you could help me out!
jsFiddle
HTML:
<div id='slideshow'>
<figure id='imagestrip'>
<img src="images/img2.jpg" alt="Photograph of a Black kite">
<img src="images/img3.jpg" alt="Profile of a Red kite">
<img src="images/img4.jpg" alt="Pelicans on moorings at sea">
<img src="images/img9.jpg" alt="Photograph of Pariah kite">
</figure>
</div>
CSS:
#slideshow {
width: 80%;
margin: 0 auto;
height: 20em;
position: relative;
overflow: hidden;
perspective: 850px;
/* outline: 3px solid blue;*/
}
#slideshow figure {
position: absolute;
width: 400%;
height: 100%;
margin: 0;
transform-style: preserve-3d;
animation: slider2 30s infinite;
outline: 2px solid red;
}
figure img {
width: 25%;
height: 100%;
float: left;
outline: 3px solid yellow;
}
#keyframes slider2 {
0% {
transform: translateX(0%);
transform: translateZ(0px); /*Zoom-in*/
}
2% {
/* transform: translateX(-25%);*/
transform: translateZ(250px);
}
20% {
transform: translateX(0%);
transform: translateZ(250px);
}
22% {
transform: translateX(0%);
transform: translateZ(0px);
}
25% {
/*transform: translateX(-25%);*/
transform: translateZ(0);
transform: translateX(-25%);
}
27% {
/*transform: translateX(-25%);*/
transform: translateZ(250px);
transform: translateX(-25%);
}
45% {
transform: translateZ(250px);
transform: translateX(-25%);
}
47% {
transform: translateZ(0px);
transform: translateX(-25%);
}
50% {
/*transform: translateZ(100px);*/
transform: translateX(-50%);
/*transform: translateZ(0px);*/
}
57% {
transform: translateZ(250px);
transform: translateX(-50%);
}
75% {
transform: translateZ(250px);
transform: translateX(-50%);
}
77% {
transform: translateZ(0px);
transform: translateX(-50%);
}
80% {
/*transform: translateZ(250px);*/
transform: translateX(-75%);
}
My pattern is as follows:
An image Zooms-in for, say, 1s and stays for a while, say, 5s and then zooms-out again for 1s. then it slides left by transform: translateX(%). This pattern is successful for first image but as the second image slides in, nothing happens, though the animation rules are same for other images.

Answer 1

When you want to specify multiple transforms to an element, they should be set to the same property as space separated values and not add a second transform property with the next transform. If you do it that way, then the latest transform would override the one that was provided earlier within same keyframe.
For example, in the below keyframe only the transform: translateZ(0px) has a value.
0% {
transform: translateX(0%);
transform: translateZ(0px);
}
#slideshow {
width: 80%;
margin: 0 auto;
height: 20em;
position: relative;
overflow: hidden;
perspective: 850px;
/* outline: 3px solid blue;*/
}
#slideshow figure {
position: absolute;
width: 400%;
height: 100%;
margin: 0;
transform-style: preserve-3d;
animation: slider2 30s infinite;
outline: 2px solid red;
}
figure img {
width: 25%;
height: 100%;
float: left;
outline: 3px solid yellow;
}
#keyframes slider2 {
0% {
transform: translateX(0%) translateZ(0px);
}
2% {
transform: translateZ(250px);
}
20% {
transform: translateX(0%) translateZ(250px);
}
22% {
transform: translateX(0%) translateZ(0px);
}
25% {
transform: translateZ(0) translateX(-25%);
}
27% {
transform: translateZ(250px) translateX(-25%);
}
45% {
transform: translateZ(250px) translateX(-25%);
}
47% {
transform: translateZ(0px) translateX(-25%);
}
50% {
transform: translateX(-50%);
}
57% {
transform: translateZ(250px) translateX(-50%);
}
75% {
transform: translateZ(250px) translateX(-50%);
}
77% {
transform: translateZ(0px) translateX(-50%);
}
80% {
transform: translateX(-75%);
}
}
<div id='slideshow'>
<figure id='imagestrip'>
<img src="https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b" alt="Photograph of a Black kite">
<img src="https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b" alt="Profile of a Red kite">
<img src="https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b" alt="Pelicans on moorings at sea">
<img src="https://images.unsplash.com/41/NmnKzKIyQsyGIkFjiNsb_20140717_212636-3.jpg?q=80&fm=jpg&s=ce9ba69c9caf7d6483d874466478bc9b" alt="Photograph of Pariah kite">
</figure>
</div>