Fade slideshow single image

Question

I have a fading slideshow on my homepage that cycles through 4 images. On the inside pages, I'm just going to feature one image, but I'd like it to perform it's initial animation and then stop. The particular slideshow I am using uses CSS keyframes, but if I remove the CSS keyframes or the animate CSS, then the page just sits there and does nothing when it loads. The animate CSS is set to infinite, which I know is part of it because it's infinitely cycling through but what I am trying to do is keep the same consistency on the inside pages, with just one image it needs the initial animation, but after the initial animation and the image loads, the slideshow should stop. Right now, it seems to walk through everything, so with the CSS keyframes it loads my image, then it's blank for a while and will eventually show the image again. I know that's how it's designed to work, I just don't know how to tweak it to work with just a single image without it cycling through those CSS keyframes like it does. Even if the CSS is entirely different, that's fine because it'll be on a completely different page :-)

HTML:

<div class="slide">
    <div style="background-image:url(https://images.unsplash.com/photo-1575932150875-d31ebc835f67?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1650&q=80)"></div>
    <div style="background-image:url(https://images.unsplash.com/photo-1608500567505-269fa4192c58?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1704&q=80)"></div>
    <div style="background-image:url(https://images.unsplash.com/photo-1477936821694-ec4233a9a1a0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1620&q=80)"></div>
    <div style="background-image:url(https://images.unsplash.com/photo-1485735662814-c4f66e49dbae?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80)"></div>
</div>

CSS:

.slide {
    background: #fff;
    height: 350px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slide > div {
    animation: slide 16s infinite;
    background-position: center center;
    background-size: cover;
    height: 100%;
    opacity: 0;
    position: absolute;
    width: 100%;
}

.slide > div:nth-child(2) {
    animation-delay: 4s;
}

.slide > div:nth-child(3) {
    animation-delay: 8s;
}

.slide > div:nth-child(4) {
    animation-delay: 12s;
}

@keyframes slide {
    10% {
        opacity: 1;
    }
    20% {
        opacity: 1;
    }
    30% {
        opacity: 0;
    }
    40% {
        transform: scale(1.2);
    }
}

Here is the fiddle: https://jsfiddle.net/nd81hzuc/ that has four images :-)

Any help is appreciated!

Thanks,
Josh

Answer 1

If you want to show the animation for only one image. First, remove the divs you don't wish to show. Then, you need to replace infinite for forwards 1. Finally adjust your @keyframes, set "opacity" and "transform" to 100% and the value to how you wish the image to stay.

  .slide {
  background: #fff;
  height: 350px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slide>div {
  animation: slide 10s forwards 1; /* Play animation only once */
  background-position: center center;
  background-size: cover;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
}

@keyframes slide {
  100% {
    opacity: 1;
  }
  100% {
    transform: scale(1.2);
  }
}

<div class="slide">
  <div style="background-image:url(https://images.unsplash.com/photo-1575932150875-d31ebc835f67?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1650&q=80)"></div>
</div>