Create An Animated Slideshow With CSS3

This tutorial aims at showing you how to create an animated four panel slideshow using css3.

NOTE: This tutorial assumes you have some kind of reset stylesheet and autoprefixer connected to your project.

---

THE HTML

<ul class="slideShow">
    <li class="slide1"></li>
    <li class="slide2"></li>
    <li class="slide3"></li>
    <li class="slide4"></li>
</ul>

It’s as simple as creating an unorganized list and four list items. Note that each line of code has a unique class attached to it.

---

THE CSS

.slideShow: {
    height: 70vh;
    width: 80vw;
}

While not having any size property for the ul element won’t stop the slideshow from working, it is necessary if you are using images or are positioning the slideshow on your webpage.

---

.slideShow li {
    position: absolute;
    height: 70vh;
    width: 80vw;
    background-size: 70vh 80vw; 
}

It’s important to give the li element an absolute position property so that each slide is on top of one another and not as a list running down the page. The background-size property is used so entire images can be viewed in the slideshow (if your slideshow contains no images this property isn’t necessary).

---

.slide1 {
    background: url(http://i.imgur.com/WxYI2ld.jpg);
    animation: frameone 8s linear infinite; 
}

.slide2 {
    background: url(http://i.imgur.com/34EzuKx.jpg);
    animation: frametwo 8s linear infinite; 
}

.slide3 {
    background: url(http://i.imgur.com/kAP9OoT.jpg);
    animation: framethree 8s linear infinite; 
}

.slide4 {
    background: url(http://i.imgur.com/5cBKrbR.jpg);
    animation: framefour 8s linear infinite; 
}

In this example, I’ve given each slide its own image with the background property. You may notice a lot of similarity with each animation property, the only difference between each of them is the name, this is because each slide is going to have its own keyframe.

---

@keyframes frameone {
    0% { opacity: 1; }
    20% { opacity: 1; }
    25% { opacity: 0; }
    95% { opacity: 0; }
    100%{ opacity: 1; } 
}

@keyframes frametwo {
    0% { opacity: 0; }
    20% { opacity: 0; }
    25% { opacity: 1; }
    45% { opacity: 1; }
    50% { opacity: 0; }
    100%{ opacity: 0; } 
}

@keyframes framethree {
    0% { opacity: 0; }
    45% { opacity: 0; }
    50% { opacity: 1; }
    70% { opacity: 1; }
    75% { opacity: 0; }
    100%{ opacity: 0; } 
}

@keyframes framefour {
    0% { opacity: 0; }
    70% { opacity: 0; }
    75% { opacity: 1; }
    95% { opacity: 1; }
    100%{ opacity: 0; } 
}

Each keyframe tells each slide when to fade in and out using the opacity property. The first slide begins at full opacity. After 20% of the animation length has passed, it’ll begin to fade out and the second slide will fade in. 5% later the transition will be completed and this process will repeat for the other slides indefinitely.

If you want to add or remove slides in the slideshow, among adding/removing li elements in HTML and creating a unique class in CSS, you’ll have to edit the timing of each keyframe. To change the speed of the animation, simply edit the animation duration property in the slide class, but remember to this for each slide class.

---

A couple examples of this slideshow code in action:
Image slideshow
Text based slideshow