How to stop animation at the last frame - css

Question

I am trying to rotate a cube in a three direction. I need to stop the animation at the 3rd Box but its comes to original position. From the 3rd box there is an animation back to the 1st box which I don't want.The animation should stop at 3rd Box. Give some solution.
#spinner div {
position: absolute;
width: 120px;
height: 120px;
border: 1px solid #ccc;
background: rgba(255, 255, 255, 0.8);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 120px;
font-size: 100px;
}
#spinner .face1 {
-webkit-transform: translateZ(60px);
}
#spinner .face2 {
-webkit-transform: rotateY(90deg) translateZ(60px);
}
#spinner .face3 {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
}
#-webkit-keyframes spincube {
from, to {} 16% {
-webkit-transform: rotateY(-90deg);
}
33% {
-webkit-transform: rotateY(-90deg) rotateZ(90deg);
}
}
#spinner {
-webkit-animation-name: spincube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-webkit-animation-duration: 8s;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 60px 60px 0;
}
<div id="stage" style="width: 1200px; height: 300px;">
<div id="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
</div>
</div>

Answer 1

Though you had set the animation-fill-mode to forwards (the -webkit prefix should not be a problem as you were trying on Chrome), the animation did not stop at the 3rd box because your to setting (last keyframe) was taking it back to its original state (which shows box 1). To fix this, you can make the last keyframe also hold the same position as at 33% (which is show box 3).
#spinner div {
position: absolute;
width: 120px;
height: 120px;
border: 1px solid #ccc;
background: rgba(255, 255, 255, 0.8);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
text-align: center;
line-height: 120px;
font-size: 100px;
}
#spinner .face1 {
-webkit-transform: translateZ(60px);
}
#spinner .face2 {
-webkit-transform: rotateY(90deg) translateZ(60px);
}
#spinner .face3 {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
}
#-webkit-keyframes spincube {
from {}
16% {
-webkit-transform: rotateY(-90deg);
}
33% {
-webkit-transform: rotateY(-90deg) rotateZ(90deg);
}
to {
-webkit-transform: rotateY(-90deg) rotateZ(90deg);
}
}
#spinner {
-webkit-animation-name: spincube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-webkit-animation-duration: 8s;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 60px 60px 0;
}
<div id="stage" style="width: 1200px; height: 300px;">
<div id="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</di>
</div>
</div>
Or, you could also change your keyframe settings like below. Note that, I have reduced the duration by a third because we are changing the keyframes by a factor of 3.
#-webkit-keyframes spincube {
from {
}
48% { /* factor of 3 since we are changing 33% to 100% or to */
-webkit-transform: rotateY(-90deg);
}
to { /* make the last keyframe show the box 3 */
-webkit-transform: rotateY(-90deg) rotateZ(90deg);
}
}
#spinner {
-webkit-animation-name: spincube;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode: forwards;
-webkit-animation-duration: 2.7s; /* reduce total duration by a 3rd */
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 60px 60px 0;
}