Stop animation at the end of nth-child / CSS3 [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I have got an crossfading animation to show 3 steps of content. How could I make it so that it ends after the third one? so no more crossfading.
CodePen link
I divided it into nth-child(),
Here's my CSS code:
.animation {
-moz-animation: imageAnimation 30s linear 0s;
-ms-animation: imageAnimation 30s linear 0s;
-o-animation: imageAnimation 30s linear 0s;
-webkit-animation: imageAnimation 30s linear 0s;
-webkit-backface-visibility: hidden;
animation: imageAnimation 30s linear 0s;
color: black;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
z-index: 0;
}
.animation:nth-child(2) {
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
-o-animation-delay: 6s;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.animation:nth-child(3) {
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
-o-animation-delay: 12s;
-webkit-animation-delay: 12s;
animation-delay: 12s;
}
#-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
100% {
opacity: 0;
}
}
HTML
<div class="box">
<div class="animation">
<h4>Hello-1</h4>
</div>
<div class="animation">
<h4>Hello-2</h4>
</div>
<div class="animation">
<h4>Hello-3</h4>
</div>
</div>

Answer 1

If you by "to end" mean that the 3rd child does not dissapear, you need to declare new animation #keyframes declaration that you use for that 3rd child, so it does not end (100%) with opacity:0.
EDIT:
This is how the new keyframes definition could look like:
#keyframes imageAnimationStop {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
animation-timing-function: ease-out;
}
100% {
opacity: 1
}
}
This says that the end state (100%) should have opacity: 1 so it remains visible. I also forked your codepen. This new keyframe is not browser prefixed but I guess you can do that much :). Then you just need to use this new heyframes definition for your 3rd child demo