2

I am making a slideshow using just html and css in which images fade into one another on an infinite loop.

However, when I test it. The first image fades completely to white and then the second image fades in, rather than the first image fading out and the second image in at the same time.

To clarify, this only occurs from the second cycle onwards. That is, the first cycle of five images does transition seamlessly, with simultaneous fade-ins and fade-outs, but every other subsequent cycle of the slideshow has whiteouts between slides.

I would like to make these transitions seamless. Obviously, I have made a mistake with either my opacity controls or the key frames timer.

Please help. Very grateful.

The CSS:

.css-slideshow { min-width:100%; position: fixed; } .css-slideshow figure { position: fixed; min-width: 100%; width: 100%; margin: 0 auto; } figure:nth-child(1) { animation: xfade 24s 24s infinite; } figure:nth-child(2) { animation: xfade 24s 18s infinite; } figure:nth-child(3) { animation: xfade 24s 12s infinite; } figure:nth-child(4) { animation: xfade 24s 6s infinite; } figure:nth-child(5) { animation: xfade 24s 0s infinite; } @keyframes xfade { 0%{ opacity: 1; } 10.5% { opacity: 1; } 12.5%{ opacity: 0; } 98% { opacity: 0; } 100% { opacity: 1; } }

The HTML:

<div class="css-slideshow"> <figure> <img src="slider-image1.jpg" width="100%" alt="class-header-css3"/> </figure> <figure> <img src="slider-image2.jpg" width="100%" alt="class-header-semantics"/> </figure> <figure> <img src="slider-image3.jpg" width="100%" alt="class-header-offline"/> </figure> <figure> <img src="slider-image4.jpg" width="100%" alt="class-header-device"/> </figure> <figure> <img src="dfdfdfdfdd.jpg" width="100%" alt="class-header-connectivity"/> </figure> </div>
Improve this question
5
  • 3
    Provide enough code to make a full example. This is only the CSS. Where's the markup? Commented Jul 19, 2016 at 18:07
  • Good point. The markup is there now. Commented Jul 19, 2016 at 18:12
  • codepen.io/anon/pen/rLJPyv I threw your markup and CSS into a codepen. I don't see any interim 'white' fade Commented Jul 19, 2016 at 18:14
  • That's interesting / troubling. I followed your link to codepen and I am still seeing whiteout between images. Commented Jul 19, 2016 at 18:23
  • I should clarify: the first cycle through of the five images, there is no interim whiteout, but on all subsequent cycles there is interim white out. Commented Jul 19, 2016 at 18:26

1 Answer 1

Reset to default
1 

.css-slideshow { min-width:100%; position: fixed; } .css-slideshow figure { position: fixed; min-width: 100%; width: 100%; margin: 0 auto; } figure:nth-child(1) { animation: xfade 25s 20s infinite; } figure:nth-child(2) { animation: xfade 25s 15s infinite; } figure:nth-child(3) { animation: xfade 25s 10s infinite; } figure:nth-child(4) { animation: xfade 25s 5s infinite; } figure:nth-child(5) { animation: xfade 25s 0s infinite; } @keyframes xfade { 0%{ opacity: 1; } 20%{ opacity: 0; } 80% { opacity: 0; } 100% { opacity: 1; } }
<div class="css-slideshow"> <figure> <img src="https://images.unsplash.com/photo-1468476775582-6bede20f356f?dpr=2&auto=format&crop=entropy&fit=crop&w=1500&h=979&q=80" width="100%" alt="class-header-css3"/> </figure> <figure> <img src="https://images.unsplash.com/photo-1466046690866-98181611563d?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80" width="100%" alt="class-header-semantics"/> </figure> <figure> <img src="https://images.unsplash.com/photo-1468476775582-6bede20f356f?dpr=2&auto=format&crop=entropy&fit=crop&w=1500&h=979&q=80" width="100%" alt="class-header-offline"/> </figure> <figure> <img src="https://images.unsplash.com/photo-1466046690866-98181611563d?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80" width="100%" alt="class-header-device"/> </figure> <figure> <img src="https://images.unsplash.com/photo-1465284958051-1353268c077d?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1000&q=80" width="100%" alt="class-header-connectivity"/> </figure> </div>

This will work. A couple of things I noticed: 1) you have 5 images but were using a 24 second animation with 6 second delays. 2) 24s and 0s animations will start at the same time starting with the second pass. 3) your pictures weren't opaque long enough to not have gaps between animation delays

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.