0

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>
ekclone
  • 1,030
  • 2
  • 17
  • 39
  • Possible duplicate of [Stopping a CSS3 Animation on last frame](http://stackoverflow.com/questions/4359627/stopping-a-css3-animation-on-last-frame) – TylerH Nov 28 '15 at 02:48

1 Answers1

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

preator
  • 984
  • 5
  • 6