Html Question posted in
Some basic documentation can be found here.

Html – CSS Infinite Animation Not Quite Right

I have a slideshow I found: https://www.w3.org/Style/Examples/007/slideshow.en.html (It’s Slideset6)

The main difference is my version cycles through 5 slides and the example cycles through 3.

What I am seeing is the slideshow cycles through all 5 slides, then when it starts over it starts on slide 3 instead of slide 1 and never shows slides 1-2 after that. Each additional time it cycles through the show, it’s the same behavior. First slides 1-5, then slides 3-5, slides 3-5, slides 3-5, etc.

The 12s is how long it’s staying on each slide and each slide is delayed by 4s, so for each additional slide I added 4s. This all seems right to me.

My code looks like:

<div id="slides">
    <div>
        <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
        <p>Beautiful</p>
    </div>
    <div>
        <img src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
        <p>Amazing</p>
    </div>
    <div>
        <img src="https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
        <p>Incredible</p>
    </div>
    <div>
        <img src="https://images.unsplash.com/photo-1715553176007-31923bd14f78?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
        <p>Wonderful</p>
    </div>
    <div>
        <img src="https://images.unsplash.com/photo-1715314117855-3f070860d47f?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
        <p>Sweet</p>
    </div>
</div>

The CSS:

/* Slides */
#slides {
    max-width: 700px;
    position: relative;
    width: 100%;
}

#slides > * {
    animation: 12s autoplay infinite linear;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;  
}

/* Animation */
@keyframes autoplay {
    0% {
        opacity: 0;
    }
    4% {
        opacity: 1;
    }
    33.33% {
        opacity: 1;
    }
    37.33% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

#slides > *:nth-child(1) {
    animation-delay: 0s;
}

#slides > *:nth-child(2) {
    animation-delay: 4s;
}

#slides > *:nth-child(3) {
    animation-delay: 8s;
}

#slides > *:nth-child(4) {
    animation-delay: 12s;
}

#slides > *:nth-child(5) {
    animation-delay: 16s;
}

#slides p {
    background: #ff0000;
    bottom: 0;
    color: #fff;
    font-size: 1.5rem;
    margin: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    transform: scale(-1);
    writing-mode: vertical-rl;
}

Any help is appreciated!

Thanks,
Josh

Tags:

2

Answers


  1. 0

    animation: 12s autoplay infinite linear;

    This should be 20s.

    To better understand how CSS animation works, you can inspect the animation timeline in devtool (F12).
    enter image description here

    Login or Signup to reply.
  2. 0

    Now you have 5 slides you want each one to be visible for a 5th of the time.

    Looking at your keyframes, they are still based around a third of the time each.

    This snippet alters that so each slide fades in, stays visible and then fades out around a 5th of the total time.

    Assuming you still want each slide to show for around 4seconds, the snippet also changes the total animation time from 12s to 20s.

    You can of course alter those %s before and after the 20% to increase or decrease the time a slide takes fading in and out.

    /* Slides */

#slides {
  max-width: 700px;
  position: relative;
  width: 100%;
}

#slides>* {
  animation: 20s autoplay infinite linear;
  left: 0;
  opacity: 0;
  position: absolute;
  top: 0;
}


/* Animation */

@keyframes autoplay {
  0% {
    opacity: 0;
  }
  4%,
  20% {
    opacity: 1;
  }
  24%,
  100% {
    opacity: 0;
  }
}

#slides>*:nth-child(1) {
  animation-delay: 0s;
}

#slides>*:nth-child(2) {
  animation-delay: 4s;
}

#slides>*:nth-child(3) {
  animation-delay: 8s;
}

#slides>*:nth-child(4) {
  animation-delay: 12s;
}

#slides>*:nth-child(5) {
  animation-delay: 16s;
}

#slides p {
  background: #ff0000;
  bottom: 0;
  color: #fff;
  font-size: 1.5rem;
  margin: 0;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  transform: scale(-1);
  writing-mode: vertical-rl;
}
    <div id="slides">
  <div>
    <img src="https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=752&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
    <p>Beautiful</p>
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?w=750&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
    <p>Amazing</p>
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1498753427761-548428edfa67?w=889&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D">
    <p>Incredible</p>
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1715553176007-31923bd14f78?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
    <p>Wonderful</p>
  </div>
  <div>
    <img src="https://images.unsplash.com/photo-1715314117855-3f070860d47f?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
    <p>Sweet</p>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search