Animate div slider with CSS

Question

I am designing an HTML+CSS slider with automatic transition between slides and infinite duration. I have this slider on different pages with different content (and number of divs), so I need to write the same code for everything.

<div class="slide-container">
    <div class="slide">div 1 goes here!</div>
    <div class="slide">div 2 goes here!</div>
    <div class="slide">div 3 goes here!</div>
</div>

I have started with this CSS code and tried with different animations, but I don't know how to do this

.slide-container {   
    -webkit-animation: transition 2s infinite linear;
    -moz-animation: transition 2s infinite linear;
    -o-animation: transition 2s infinite linear;
}

EDIT: This is the last transition I used to solve my issue:

@-webkit-keyframes animation {
    20%,30% {-webkit-transform: translate(100%);}
    70%,100% {-webkit-transform: translate(-100%);}
}

I want to get a div in screen for 5-10 seconds and a transition between divs of 2 seconds (in brackets div that must be on screen at these moment, width=100%, height=50px):

(-start-DIV1 5s)--2s-->(DIV2 5s)--2s-->...-->(DIVN 5s)--2s-->(DIV1 5s)-->...

The reason I do slider with CSS is because I'm trying to avoid JavaScript and JQuery functions.

Answer 1

Here is a quick demo that demonstrates some of the techniques you'll need to use. I've used the same HTML markup you provided. This is not a ready-to-go "copy and paste" solution -- you'll need to take some time to understand the code and apply the concept to your particular use-case.

The technique basically involved lining up all the slides side-by-side, then shift the entire row of them every few seconds. The edges will be cropped so that only one slide is shown at a time.

To start with, you'll need to define the size of your "viewing area", by applying a width and height to the .slide-container element. Then apply overflow: hidden to the container, so that slides which aren't in the "viewing area" aren't shown.

Each slide should fill the "viewing area", so apply a width and height of 100% to each .slide element. You'll also need make them display as inline-block elements, so that they are aligned side-by-side, but still fill their container.

Finally, the hard part: defining the animation. Keyframe animations are percentage-based. Basically, since there are three slides, we want to switch after 33% of the animation has elapsed, again after 66%, and return to the beginning after 100%. We want a smooth "slide", so we'll make the actual transition last 5% in total -- so the first one actually starts at 28% and ends at 33%. The keyframes code looks like this:

@keyframes slide {
  /* modify percentages to match how many items you have */
  0% { margin-left: 0; } /* initial position */
  /* (stays in first position ) */
  28.333% { margin-left: 0; } /* start sliding */
  33.333% { margin-left: -100%; } /* done sliding */
  /* (stays in second position ) */
  61.667% { margin-left: -100%; } /* start sliding */
  66.667% { margin-left: -200%; } /* done sliding */
  /* (stays in third position ) */
  95% { margin-left: -200%; } /* start sliding */
  100% { margin-left: 0; } /* done sliding - back to initial position */
}

And it can be applied to the first slide like this (adjust transition time as desired):

.slide:first-of-type {
  animation: slide 10s ease;
  animation-iteration-count: infinite;
}

After you've done this, you'll just need to adjust to your preferences. Experiment with slide durations and transition types. Perhaps change how the animation repeats at the end. You can even use the animation-play-state property to pause the animation when you hover over the "viewing window". I've included a full demo below that includes the hover-to-pause feature. If you're not 100% clear about how it works, try removing the overflow: hidden property from the .slide-container element.

@keyframes slide {
  0% { margin-left: 0; }
  28.333% { margin-left: 0; }
  33.333% { margin-left: -100%; }
  61.667% { margin-left: -100%; }
  66.667% { margin-left: -200%; }
  95% { margin-left: -200%; }
  100% { margin-left: 0; }
}
.slide-container {
  overflow: hidden; /* try commenting this line out! */
  width: 150px;
  height: 100px;
  border: 1px solid #000000;
}
.slide {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.slide:first-of-type {
  animation: slide 10s ease;
  animation-iteration-count: infinite;
}
.slide-container:hover .slide:first-of-type {
  animation-play-state: paused;
}

<div class="slide-container">
  <div class="slide" style="background: #ff0000">div 1 goes here!</div><div class="slide" style="background: #00ff00">div 2 goes here!</div><div class="slide" style="background: #0000ff">div 3 goes here!</div>
</div>

Here is the same demo on jsFiddle.

Answer 2

Below where 12s is defined is the total slide time. This divided by the amount of slides (which in this demo is 3) gives us 4s a slide in this example. This is one method where you can toggle slide time. But like the other poster mentioned you'll still have to customize a bit. My method demonstrates a horizontal slide approach with a smooth transition and fast load time. In any case pure CSS3 is what your after.

---

JS Poodle.

CSS3 power:

body {
    padding: 1em;
    background: #999
}
.scrollable {
    width: 333px;
    margin: 0 auto;
    padding: 0;
    border:10px solid #fff;
    background: #000;
    position: relative;
    overflow: hidden;
    text-align: center;
}
img {
    max-width: 333px;
    margin: 0;
    float:left;
}
.items {
    width:999px;
    -webkit-animation: hscroll 12s infinite;
    -moz-animation: hscroll 12s infinite;
    -ms-animation: hscroll 12s infinite;
}

@-webkit-keyframes hscroll {
  0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
  33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
  100%  { margin-left: 0 }
}

@-moz-keyframes hscroll {
  0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
  33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
  100%  { margin-left: 0 }
}

@-ms-keyframes hscroll {
  0%   { margin-left: 0; }
27.33%  { margin-left: 0 }
  33.33%  { margin-left: -333px; }
60.66% { margin-left: -333px; }
66.66% { margin-left: -666px; }
94.99% { margin-left: -666px; }
  100%  { margin-left: 0 }
}

<div class="scrollable">
    <div class="items">
        <img src="http://placehold.it/333x500/E8117F/FFFFFF&text=Horizontal"/>
        <img src="http://placehold.it/333x500/FFFFFF/E8117F&text=css3"/>
        <img src="http://placehold.it/333x500/3D668F/FFFFFF&text=slide show"/>
    </div>
</div>