I recently needed to crossfade images, showcasing app screens for a project. I looked around online for an ideal solution, and everything I found was way overkill or bloat. I just needed to smoothly faded a series of images into each other. That’s it!
setInterval, every few seconds I move (or append) the top item in a list to the bottom, and then letting CSS do the rest.
In the CSS, I set all the items in the list to be stacked on top of each other using
position: absolute. Then I set
opacity: 0 to all items, except the first-child and last-child. So the top and bottom items are the only two items visible. I also set the first-child (or top item) to have a slightly higher
z-index, so they are now stacked in order. As soon as the top item is moved to the bottom, it loses it’s priority
z-index but is still visible (just underneath). The 2nd item is then moved to the top, acquiring the new styles of having
opacity: 1 and the higher
z-index. We now have a working slideshow.
transition: opacity 1s ease to the first-child and the 2nd item in the list will now fade on top of the item moved to the bottom.
Demo without styles: