A Pure CSS3 Cycling Slideshow

Advertisement

Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.

But we must be careful to avoid abusing CSS3, not only because old browsers do not support all of its properties. In any case, we all see the potential of CSS3, and in this article we’ll discuss how to create an infinitely looping slider of images using only CSS3 animation.

Sections of This Article

To get a solid sense of the process from beginning to end, below is an outline of the article. Please note that this effect will only work properly in modern browsers that support the CSS3 properties being used.

  1. Introduction1
    Learn basic concepts related to CSS3 transitions and keyframe animation.
  2. HTML markup2
    Create the HTML markup for the sliding images.
  3. CSS styles3
    Create the style sheet to display the slider.
  4. CSS3 keyframe animation4
    Add animation to the slider (we’ll explain the various processes happening here).
  5. Progress bar5
    Add a progress bar for our slider.
  6. Tooltip6
    Add a tooltip to display the title of the image.
  7. CSS3 transitions7
    Animate the tooltip using CSS3 transitions to make it appear to hover over the image.
  8. Pause and restart8
    Pause the slider and restart it on hover.
  9. Demo9
    Check out the slider in action.
  10. Conclusion10
    Final considerations.

Pure CSS3 Cycle Slider11
Screenshot of the pure CSS3 cycling slideshow12.

1. Introduction

To follow this tutorial, having a basic understanding of CSS, especially CSS3 transitions and keyframe animation, is important. Using this simple concept, we will see how to make a functional image slider.

Basic Concepts of CSS3 Transitions

Normally when you change a CSS value, the change is instant. Now, thanks to the transition property, we can easily animate from the old to new state.

We can use four transition properties:

  1. transition-property
    Defines the name(s) of the CSS properties to which the transitions should be applied.
  2. transition-duration
    Defines the duration over which the transitions should occur.
  3. transition-timing-function
    Determines how intermediate values of the transition are calculated. The effects from the timing function are commonly called easing functions.
  4. transition-delay
    Defines when the transition starts.

At the moment, CSS3 transitions are supported in Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ and IE 10. Because the technology is still relatively new, prefixes for browsers are required. So far, the syntax is exactly the same for each browser, with only a prefix change required. We will omit them in the snippets in this article, but please remember to include the prefixes in your code.

Let’s see how to apply a simple transition to a link:

a {
   color: #000;
   transition-property: color;
   transition-duration: 0.7s;
   transition-timing-function: ease-in;
   transition-delay: 0.3s;
}

a:hover {
   color: #fff;
}

When assigning an animation to an element, you can also use the shorthand:

a  {
   color: #000;
   transition: color 0.7s ease-in 0.3s;
}

a:hover {
   color: #fff;
}

The W3C has a list of all “Animatable Properties13.”

Basic Concepts of CSS3 Animations

CSS animation enables us to create animations without JavaScript by using a set of keyframes.

Unlike CSS transitions, keyframe animations are currently supported only in Webkit browsers and Firefox and soon in IE 10. Unsupported browsers will simply ignore your animation code.

The animation property has eight subproperties:

  1. animation-delay
    Defines when the animation starts.
  2. animation-direction
    Sets the animation to play in reverse on alternate cycles.
  3. animation-duration
    Defines the length of time an animation takes to complete one cycle.
  4. animation-iteration-count
    Defines the number of times an animation cycle should play before stopping.
  5. animation-name
    Specifies the name of the @keyframes rule.
  6. animation-play-state
    Determines whether an animation is running or paused.
  7. animation-timing-function
    Describes how an animation progresses over one cycle.
  8. animation-fill-mode
    Specifies how a CSS animation should apply styles to its target before and after executing.

Let’s see how to apply a simple animation to a div.

/* This is the element we are applying the animation to. */

div {
   animation-name: move;
   animation-duration: 1s;
   animation-timing-function: ease-in-out;
   animation-delay: 0.5s;
   animation-iteration-count: 2;
   animation-direction: alternate;

   -moz-animation-name: move;
   -moz-animation-duration: 1s;
   -moz-animation-timing-function: ease-in-out;
   -moz-animation-delay: 0.5s;
   -moz-animation-iteration-count: 2;
   -moz-animation-direction: alternate;

   -webkit-animation-name: move;
   -webkit-animation-duration: 1s;
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-delay: 0.5s;
   -webkit-animation-iteration-count: 2;
   -webkit-animation-direction: alternate;
}

/* This is the animation code. */

@keyframes move {
   from {
      transform: translateX(0);
   }
   to {
      transform: translateX(100px);
   }
}

@-moz-keyframes move {
   from {
      -moz-transform: translateX(0);
   }
   to {
      -moz-transform: translateX(100px);
   }
}

@-webkit-keyframes move {
   from {
      -webkit-transform: translateX(0);
   }
   to {
      -webkit-transform: translateX(100px);
   }
}

But we can use the shorthand property to conveniently set all of the animation properties at once.

div {
   animation: move 1s ease-in-out 0.5s 2 alternate;
   -moz-animation: move 1s ease-in-out 0.5s 2 alternate;
   -webkit-animation: move 1s ease-in-out 0.5s 2 alternate;
}

Keyframes

Each keyframe describes how an animated element should render at a given point in the animation sequence. The keyframes take a percentage value to specify time: 0% is the start of the animation, while 100% is the end. You can optionally add keyframes for intermediate animations.

/* Animation from 0% to 100% */

@keyframes move {
   0% { transform: translateX(0); }
   100% { transform: translateX(100px); }
}

/* Animation with intermediate keyframes */

@keyframes move {
   0% { transform: translateX(0); }
   50% { transform: translateX(20px); }
   100% { transform: translateX(100px); }
}

The W3C has a lot of useful and detailed information on “CSS3 Animations14.”

Basic Structure of Our Slider

Now that we know how transitions and animation work, let’s see how to create our slider using only CSS3. This sketch shows how the animation should work:

Sketch animation slider function
How the animation slider functions

As you can see, the slider will be a container inside of which the images will be displayed.

The animation is very simple: the image follow a predefined path, animating the top property and changing the z-index and opacity properties when the image returns to its initial position.

Let’s dive right into the HTML markup to create the slider.

2. HTML Markup

The HTML markup is very simple; it’s all organized and SEO-friendly. Let’s see the full code first and then figure out in detail how everything works.

<div class="container">
   <div id="content-slider">
      <div id="slider">  <!-- Slider container -->
         <div id="mask">  <!-- Mask -->

         <ul>
         <li id="first" class="firstanimation">  <!-- ID for tooltip and class for animation -->
         <a href="#"> <img src="images/img_1.jpg" alt="Cougar"/> </a>
         <div class="tooltip"> <h1>Cougar</h1> </div>
         </li>

         <li id="second" class="secondanimation">
         <a href="#"> <img src="images/img_2.jpg" alt="Lions"/> </a>
         <div class="tooltip"> <h1>Lions</h1> </div>
         </li>

         <li id="third" class="thirdanimation">
         <a href="#"> <img src="images/img_3.jpg" alt="Snowalker"/> </a>
         <div class="tooltip"> <h1>Snowalker</h1> </div>
         </li>

         <li id="fourth" class="fourthanimation">
         <a href="#"> <img src="images/img_4.jpg" alt="Howling"/> </a>
         <div class="tooltip"> <h1>Howling</h1> </div>
         </li>

         <li id="fifth" class="fifthanimation">
         <a href="#"> <img src="images/img_5.jpg" alt="Sunbathing"/> </a>
         <div class="tooltip"> <h1>Sunbathing</h1> </div>
         </li>
         </ul>

         </div>  <!-- End Mask -->
         <div class="progress-bar"></div>  <!-- Progress Bar -->
      </div>  <!-- End Slider Container -->
   </div>
</div>
  1. div id="slider"
    This is the main container of the slider. It does not have a particular function, but we will need it to pause the animation.
  2. div id="mask"
    We will use this to hide everything that happens outside of the slider. In addition to hiding the content, the mask allows us to display the contents of the slider.
  3. li id="first" class="firstanimation"
    Every list item has an ID and a class. The ID displays the tooltip, and the class is tied to the animation that has to occur.
  4. div class="tooltip"
    This simply displays the title of the image. You can modify it to your needs; for example, by making it clickable and adding a short description.
  5. div class="progress-bar"
    This contains the function that shows the progress of the animation.

Now it’s time for the CSS file.

3. CSS Style

Let’s create the basic structure of the slider. It will have the same image size. The border property will be useful to create a frame around the image.

/* SLIDER STRUCTURE */

#slider {
   background: #000;
   border: 5px solid #eaeaea;
   box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
   height: 320px;
   width: 680px;
   margin: 40px auto 0;
   overflow: visible;
   position: relative;
}

The mask class will hide all of the elements that lie outside of the slider; its height must be equal to the height of the slider.

/* HIDE ALL OUTSIDE OF THE SLIDER */

#mask {
   overflow: hidden;
   height: 320px;
}

Finally, to sort the list of images, we’ll have position: absolute and top: -325px so that all of the images are positioned outside of the slider.

/* IMAGE LIST */

#slider ul {
   margin: 0;
   padding: 0;
   position: relative;
}

#slider li {
   width: 680px;  /* Width Image */
   height: 320px; /* Height Image */
   position: absolute;
   top: -325px; /* Original Position - Outside of the Slider */
   list-style: none;
}

With these few lines of code, we have created our slider. Now we just need to add the animation.

4. CSS3 Keyframes Animation

Slider Animation
Image animation for the slider

Before we begin with the animation, we have to specify some parameters in order to get the right view of the animation.

As we know, the total duration of the animation will be 25 seconds, but we have to know how many keyframes equals 1 second.

So, let’s work out a series of operations that gives us the exact number of keyframes based on the images we have and the total duration of the animation. Here are the calculations:

  1. Define the total number of images to use in the slider
    5
  2. Define the length of animation for each image
    5 seconds
  3. Define the total duration of the animation
    Multiply the total number of images by the duration of each image:
    5 images × 5 seconds = 25 seconds
  4. Calculate how many keyframes equals one second
    Divide the total number of keyframes by the total duration of the animation.
    100 keyframes / 25 seconds = 4 keyframes
    4 keyframes = 1 second

With all of this math, we can now apply the CSS animation to the slider. We will be able to put the animation on infinite loop because each image will follow its own animation that activates once it comes up in the slider.

#slider li.firstanimation {
   animation: cycle 25s linear infinite;
}

#slider li.secondanimation {
   animation: cycletwo 25s linear infinite;
}

#slider li.thirdanimation {
   animation: cyclethree 25s linear infinite;
}

#slider li.fourthanimation {
   animation: cyclefour 25s linear infinite;
}

#slider li.fifthanimation {
   animation: cyclefive 25s linear infinite;
}

Once the properties of the animation have been assigned, we need to use keyframes to set the animation in motion.

Following this principle, we can connect the animations to each other even though they are separate, which will give us an infinite loop.

I’ve added the opacity and z-index properties to make the transition from one image to the next more attractive.

As you can see in the code, the first animation has more keyframes than the rest. The reason for this is that when the gallery is started, the first image is positioned to make way for the second image; but when the last image has finished its animation, the first image has to have additional keyframes in order for the user not to see a break between animation cycles.

Here is all of the code for the animations:

/* ANIMATION */

@keyframes cycle {
   0%  { top: 0px; } /* When you start the slide, the first image is already visible */
   4%  { top: 0px; } /* Original Position */
   16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */
   20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit image */
   21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */
   92% { top: -325px; opacity: 0; z-index: 0; }
   96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enter image*/
   100%{ top: 0px; opacity: 1; }
}

@keyframes cycletwo {
   0%  { top: -325px; opacity: 0; } /* Original Position */
   16% { top: -325px; opacity: 0; }/* Starts moving after 16% to this position */
   20% { top: 0px; opacity: 1; }
   24% { top: 0px; opacity: 1; }  /* From 20% to 24% = for 1 second enter image*/
   36% { top: 0px; opacity: 1; z-index: 0; }   /* From 24% to 36 % = for 3 seconds the image is visible */
   40% { top: 325px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit image */
   41% { top: -325px; opacity: 0; z-index: -1; }   /* Return to Original Position */
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclethree {
   0%  { top: -325px; opacity: 0; }
   36% { top: -325px; opacity: 0; }
   40% { top: 0px; opacity: 1; }
   44% { top: 0px; opacity: 1; }
   56% { top: 0px; opacity: 1; }
   60% { top: 325px; opacity: 0; z-index: 0; }
   61% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}

@keyframes cyclefour {
   0%  { top: -325px; opacity: 0; }
   56% { top: -325px; opacity: 0; }
   60% { top: 0px; opacity: 1; }
   64% { top: 0px; opacity: 1; }
   76% { top: 0px; opacity: 1; z-index: 0; }
   80% { top: 325px; opacity: 0; z-index: 0; }
   81% { top: -325px; opacity: 0; z-index: -1; }
   100%{ top: -325px; opacity: 0; z-index: -1; }
}
@keyframes cyclefive {
   0%  { top: -325px; opacity: 0; }
   76% { top: -325px; opacity: 0; }
   80% { top: 0px; opacity: 1; }
   84% { top: 0px; opacity: 1; }
   96% { top: 0px; opacity: 1; z-index: 0; }
   100%{ top: 325px; opacity: 0; z-index: 0; }
}

Having created the animations, we have to add a progress bar to display the duration of each animation.

5. Progress Bar

Progress bar Animation for each image
The progress bar for each animation

The process of animating the progress bar is the same as it was for the slider. First, we create the progress bar itself:

/* PROGRESS BAR */

.progress-bar {
   position: relative;
   top: -5px;
   width: 680px;
   height: 5px;
   background: #000;
   animation: fullexpand 25s ease-out infinite;
}

Don’t be afraid of the syntax here. It has the same function as from to; you can see that the keyframes set the appearance and disappearance of each image.

/* ANIMATION BAR */

@keyframes fullexpand {
   /* In these keyframes, the progress-bar is stationary */
   0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }

   /* In these keyframes, the progress-bar starts to come alive */
   4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }

   /* In these keyframes, the progress-bar moves forward for 3 seconds */
   16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }

   /* In these keyframes, the progress-bar has finished his path */
   17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }

   /* In these keyframes, the progress-bar will disappear and then resume the cycle */
   18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }
}

6. Tooltip

The slider is more or less complete, but let’s add a few details to make it more functional. We’ll insert tooltips for the image titles that will be visible on hover.

Simple Tooltip on image
Simple tooltip

Here is the CSS for the tooltips:

#slider .tooltip {
   background: rgba(0,0,0,0.7);
   width: 300px;
   height: 60px;
   position: relative;
   bottom: 75px;
   left: -320px;
}

#slider .tooltip h1 {
   color: #fff;
   font-size: 24px;
   font-weight: 300;
   line-height: 60px;
   padding: 0 0 0 10px;
}

Here we’ve made only the image titles visible, but you can do the same to custom text, links or whatever you like.

7. CSS3 Transitions

Tooltip Animation
Animate the tooltip on hover

We have seen how to apply CSS3 transitions to elements; now let’s do it to the tooltips.

If you remember, we added an ID to each list (first, second, etc.) to have only the tooltip associated with an image appear on hover, rather than all of the tooltips appear together.

#slider .tooltip {
…
   transition: all 0.3s ease-in-out;
}

#slider li#first: hover .tooltip,
#slider li#second: hover .tooltip,
#slider li#third: hover .tooltip,
#slider li#fourth: hover .tooltip,
#slider li#fifth: hover .tooltip {
   left: 0px;
}

8. Pause And Restart

Stop slider on mouse hover
Stop slider on mouse hover

To allow users to pause to read content or look at an image, we should stop the animation when they hover over an image. (We’ll also have to stop the animation of the progress bar.)

#slider: hover li,
#slider: hover .progress-bar {
   animation-play-state: paused;
}

9. Demo

Finally, we’ve reached the end of the tutorial. The slider is now 100% complete!

Pure CSS3 Cycle Slider15
Pure CSS3 cycling slider demo

Check out the demo16. It works in Firefox 5+, Safari 4+ and Google Chrome, as well as the iPhone and iPad. You can also download the ZIP file17.

Thanks to Massimo Righi18 for his images.

10. Conclusion

The effect is impressive, but admittedly, this slider is not very versatile. For instance, to add more images, you have to edit all of keyframes. CSS3 has great potential, but it does have limits, and sometimes JavaScript is preferable, depending on your target users.

This slider has some interesting features, such as pausing on hover and uniques link for the images, which allow users to interact with the slider. If you want full support among browsers, this is not possible, so JavaScript is recommended. Unfortunately, CSS3 animation has many limitations; its lack of flexibility in particular will prevent its widespread use for now. Hopefully this will spur you on to further study of CSS3.

Feel free to share your thoughts in the comments section below!

(al) (il)

Footnotes

  1. 1 #1
  2. 2 #2
  3. 3 #3
  4. 4 #4
  5. 5 #5
  6. 6 #6
  7. 7 #7
  8. 8 #8
  9. 9 #9
  10. 10 #10
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2011/12/final-slider.jpg
  12. 12 http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
  13. 13 http://www.w3.org/TR/css3-transitions/#properties-from-css-
  14. 14 http://www.w3.org/TR/css3-animations/
  15. 15 http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
  16. 16 http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
  17. 17 http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/CSS3-Slider.zip
  18. 18 http://www.massimorighi.com

↑ Back to topShare on Twitter

Alessio Atzeni, based in Rome, Italy, is a dedicated web designer and front-end developer with a passion for CSS3. He specializes in CSS and JavaScript web development, and building search engine friendly websites. For more front-end web development tutorials and CSS3 experiments, check out his web design blog. Follow him on Twitter @Bluxart, on Dribbble or add him on Google+.

Advertising
  1. 1

    Hi !
    Thank you for this article.
    What about keyboard navigation ?

    This is my own (old) experimentations with a keyboard navigation (tab only) and some controls (play, stop, next, prev).
    http://creativejuiz.fr/trytotry/juizy-slideshow-full-css3-html5/

    What do you think about it ?

    Regards ;)

    1
  2. 2

    I must say “- NICE, VERY NICE …”
    Now to fix it to my WordPress site. LOL…

    1
  3. 3

    That makes me really happy :’)

    0
    • 4

      I am glad you could be helpful :)

      0
    • 5

      hey great tutorial! Im having a problem with only using 3 images. I take out the css and the frames for 3 and 4 all in animation.css and i take it out from style css but it continues to keep going to the 4th and 5th frame frame i guess and i dont know why it’s doing that. I even took out the HTML ids to 4 and 5, i only want to show 3 images not 5 and i really dont know it keeps cyling. pls help

      2
  4. 6

    Hi Alessio, Great article buddy. I was looking for just the thing. I’m working on a personal experimental project and this really helped. I understand that CSS3 is still some time away from adoption but the possibilities are lucrative. Lets keep playing with it. Thats the only way to know if its a dud or otherwise. Kudos for a step in the right direction imo. m/

    0
  5. 7

    how about IE Support ?

    0
    • 8

      Hey, Alessio mentioned in his article that IE is going to have trouble doing this along with, sadly, a million other things. Microsoft better catch up fast..

      0
  6. 9

    I seriously like that but honestly: too many lines :]
    I know it is to demonstrate CSS3 but we can achieve more with fewer lines of jQuery

    0
    • 10

      You’re right, but for mobile website this is awesome stuff. Jquery animating is often way too slow on mobile devices while CSS3 animation works perfectly smooth. I’m currently working on a mobile project for which i use css3 animation combined with touch events and i’ll tell ya – it works brilliant, like a pure app!

      You have to use it at the right time. I mean if you need just a website with animations/sliders which targets audience who mainly use desktop – then yeah, jquery is the choise. But maybe you want everything as smooth on mobile devices, or you want to give IExplorer the finger, then CSS3 is the a very good way!

      Therefore, these kind of articles/demos are very good!

      0
      • 11

        So you’d recommend to use something like this instead of JS? Does it degrade gracefully on browsers that don’t support it?

        0
        • 12

          For the moment – unfortunately no. In my case with the mobile project i mentioned it doesn’t need a fallback for browsers which don’t support CSS3 animation.

          If you want to use CSS3 on webkit/mobile, but Jquery animate on regular browser, you could write both scripts and check with – for example – modernizr if you’re in a webkit environment or one that supports CSS3 transitions. And then deside what to use.

          Ofcourse this will cause more work to be done.

          There also are jquery plugins that extend the normal jquery animate function with CSS animation. They check if CSS animation is available and choose wether to use CSS animation or the javascript animation. BUT therefore you need to include first jquery and than the plugin, and that’s also more data to transfer for the mobile users..

          So for now it’s realy a matter of choice, personal preference and a good look at your audience.

          0
      • 13

        I Like this line very much – “But maybe you want everything as smooth on mobile devices, or you want to give IExplorer the finger, then CSS3 is the a very good way!”

        Some time even I feel when I get bug for IE, it’s behaving ridiculous some time :(

        I’m also working for Mobile Device web apps, this will be useful for me.
        Thanks for sharing,

        0
    • 14

      Excuse me but don’t forget that jQuery library itself isn’t consist of “a few lines”. This approach uses less resources and optimal for mobile development. It is fast and smooth.

      0
  7. 15

    This is just “WOW” – seems a little bit confusing in the beginning with all the percentages, but afterwards it is really easy!

    Pro: No need of jQuery ;)
    Cons: IE…

    0
  8. 16

    Wow, this is quite good, one of the finest pure css3 work I have seen till now.

    0
  9. 17

    It’s a nice demo but it definitely lack a “don’t use this in the wild” disclaimer. As the author states the suggested method is far from flexible and will only result in maintenance hell.

    Also, since there is quite some functionality involved here (what about user controls – going back, skipping two frames etc etc) some things are probably best left to javascript. Not because it’s faster or more reliable, but because that’s what’s javascript is supposed to do.

    But judged as a pure demo … good stuff .

    0
    • 18

      Exactly Niels, this demo was an experiment regarding the potential of CSS3.

      In fact, JavaScript is recommended in this case mainly because of maintenance and above all: the user control.

      0
  10. 20

    Really nice! I guess by following this tutorial we will learn a lot of the new concepts of css3. Great job and thank you for sharing.

    0
  11. 21

    This a great idea with CSS3 Thanks man ;)

    0
  12. 22

    This is pretty cool, even though it’s effectiveness isn’t widespread yet.

    0
  13. 23

    Dammit IE!

    0
  14. 24

    very-very useful and powrful, thank you… :D

    0
  15. 25

    When I want to try demo or download it I get this error:

    “Host Not Configured to Serve Web Traffic”

    What’s wrong?

    0
  16. 27

    Is there anyway we can view the demo again? This one seems really interesting and I know there are other slideshows out there. I’d just liked to see how this one works, if possible?

    0
  17. 28

    Great work Alessio. You work is impeccable.

    0
  18. 30
  19. 31

    thanks, a great demo for me !

    0
  20. 32

    Really nice work.Thank you very much.

    0
  21. 33

    Typical responses above, seriously people. This is great but IE10…
    Just because you don’t need a JavaScript solution also doesn’t mean its a good thing.

    0
  22. 35

    This is a very good experiment but unfortunately due to lack of browser support we may not use this technique for general websites as yet.

    I hope, IE gets a batter update mechanism like chrome then we would be able to use latest technologies on every website.

    Anyway, good work Alessio

    0
  23. 36

    Wouldn’t this be easier with the use of animation-delay?
    With that property, wou would need only one keyframe declaration and use that on all slides with a different delay (and a negative delay for the first slide)

    sore, browser support for that property is even worse, but as this is an experiment, why not?

    0
    • 37

      Hi Thomas, unfortunately the animation-delay only works the first time it is invoked, therefore once the first animation cycle is complete, the cycling does not respect the delay the consequence of overlapping images.

      0
      • 38

        The fact that the delay is only invoked the first time is actually required for the effect to work:

        http://dabblet.com/gist/2499636

        I modified your example to use only a single @keyframe-rule (per vendor) and different animation delays.
        It’s a quick and dirty modification, but works as expected (at least in Chrome and Firefox / Mac)

        edit: You could even get rid of the .firstanimation, .firstanimation, .. classes by applying the animation delay with inline-styles, but you would still have to calculate the total animation length and keyframes depending on the image count, so this still won’t be an alternative to javascript :(

        1
  24. 41

    Nice stuff!
    Why doesn’t it work in Opera?
    The article says that Opera supports these CSS tags to, but the demo just shows me a black frame (I tested Desktop and Mobile even though they have the same render engine)

    0
    • 42

      Opera 12 support CSS3 Keyframes animation, the previous version of Opera not support the keyframes animation.

      0
  25. 43

    i loved this demo. Showed the strengths of CSS3 and also the current weakness. I’ve been looking for ways to add flair to a somewhat static site and I may use this as an experiment. Either was I’m a student of CSS and I’m gathering all this in a notebook.

    0
  26. 44

    amazing! :)

    0
  27. 45

    “A Pure CSS3 Cycling Slideshow”

    What does this slideshow have to do with bicycles? :)

    Still, it is pretty awesome!

    0
    • 46

      Lol, yeah thats a bit unclear if you take it out of the context. Chief, it just means that the slideshow cycles onto itself like a circle. The images just start repeating after one iteration of the slideshow has completed.

      0
  28. 47

    That’s great, thanks! But one bug:

    When the slider is transitioning between images, a mouse-over pauses it… how would one prevent that (would be annoying for users)? But allow it to be paused when it’s not transitioning?

    0
  29. 48

    Really awesome.
    Bookmarked immediately to learn for my site in progress.

    Thank you.

    0
  30. 49

    very impressive…nice pic m/

    0
  31. 50

    Very cool and thanks for sharing. Why no user controls?

    0
  32. 51

    How would you go about checking if the user has a compatible browser?

    0
  33. 53

    This is nice, but too many lines. Such tools like jquery does this thing in easyest way and I think it was designed for stuff like that (animation etc).

    0
  34. 54

    Nice tech demo… Unfortunately I get a 404 error when trying to navigate to your demo on my WP7 :/

    0
    • 55

      That’s probably because the URL is case-sensitive. I had the same problem cuz i didn’t exactly type in the uppercases :)

      0
  35. 56

    this is madness… awesome madness :)

    0
  36. 57

    Wait, couldn’t you just use animation-offset on all the frames instead of defining basically same animations for each one of them?

    0
  37. 58

    Nice way to code in CSS3 animation, But i hate this code When View in IE!!!

    0
  38. 59

    Awesome demo and guide. I’m still amazed at the things CSS3 can do. You’re really showing the strengths of it.

    0
  39. 60

    Reading articles on CSS3 is frustrating… not because CSS3 is bad. In fact, CSS3 is downright awesome. It’s frustrating because I design and develop sites for clients who expect their websites to work in every browser that ever existed. Doesn’t matter how unrealistic that may seem, it’s just a hard fact that we have to deal with.

    0
  40. 61

    Please read “Prefix or Posthack” article by Eric Meyer on ALA at least twice to learn how to use vendor prefixes in CSS. Hint: prefix-less property should follow after all prefixed ones. That’s the only chance for browsers to improve (or even completely change) implementation in prefix-less version.

    http://www.alistapart.com/articles/prefix-or-posthack/

    0
  41. 62

    great article, but prefixes are used in wrong order. for compatibility you should start with proprietary and finish without prefix.

    0
  42. 63

    With actual chrome (19 …) it does not work as expected – when hovering out, the image becomes black and nothing happens then. That other version on http://dabblet.com/gist/2499636 works fine

    0
  43. 64

    Thank you very much for this guy. I am very surprised of what CSS3 can do. I am learning CSS and I just thought that CSS3 is just CSS. But now I think it’s more than just CSS.

    0
  44. 65

    towrywang@gmail.com

    May 1, 2012 4:44 am

    It’s nice work

    0
  45. 66

    Bit dissapointed that it features no actual Cycling.

    0
  46. 67

    Great article! The CSS3 animations section helped me out a lot. Will definitely be sharing this.

    0
  47. 68

    nice css3, this will the evolution for slideshow

    0
  48. 69

    Nupesh Thakur

    May 4, 2012 1:50 am

    Really awesome
    Nice way to code in CSS3 animation, very cool and thanks for sharing.

    Thank you.

    0
  49. 70

    what did you use to create that sketch picture

    0
  50. 71

    Very nice!

    There is only one thing I can’t get to work.

    Because of the absolute positioning of the list-items I can’t get my thumbnails (where you could manually select one of the images/articles) to work.

    That’s the only thing that doesn’t work *sigh*

    Any ideas?

    0
  51. 72

    Nice work Alessio.

    0
  52. 73

    Hi there – thanks for this! Is it possible to add something to the code so that if IE is detected, just the very first image displays and remains static? If we could do this, I think we’d start using this slider.

    0
  53. 74

    What if…
    I wondered if css count() property could do the trick. I’ve tryed in Chrome&FF but no result.
    My idea was to add a fifferent delay bassed on the element possition thanks to count(), counter-increment and counter-reset such as:
    ul {
    counter-reset: myDelay;
    }
    li {
    transition-delay: count( myDelay );
    }
    I know it would be too short time (as counter will increase a single unit each list item), but calc() could came to help us some day.
    There will be a day where simple things like this could be done with pure CSS
    Thank you Alessio

    0
  54. 75

    wat if . how to make it slide from the left to right side ..can i change all the top value to “left”

    0
  55. 76

    Eiríkur Jónsson

    September 5, 2012 3:53 pm

    Awesome stuff
    Is there any easy way to add images. Let’s say I have ten images. Can I add the images (sixth, seventh etc.) and change the values in the code or do I have to do everything from ground up using the new variables (number of images)?

    0
  56. 77

    Thanks for this great tutorial. I’m having a pretty decent time following it overall but had a question regarding the calculation of seconds per keyframe. In section 4 “Keyframes Animation” and step 4. Where does the number ’100′ come from? Is 100 the total number of percentage ‘stops’ overall or what? Sorry in advance if I’ve missed something obvi. but I’m trying to tweak the code a little for my own site and am having trouble figuring out to time things just right. Thanks in advance for help.

    0
  57. 80

    Bravissimo ! pour cette leçon de CCS3. Ça marche super bien. Merci encore.

    0
  58. 81

    So cool! It’s the prove that the creative mind can make… Congratulations!

    0
  59. 82

    This is really great… I can actually do this now and be free from jQuery headache. It’s really cool, can re-size to taste and modify. Kudos!!!

    0
  60. 83

    Because you’re so awesome I give you comment :)
    great tutorial.

    0
  61. 84

    Hi there!
    Just wanted to drop by and thank you for your tutorial. I used it on my new layout and it looks fabulous! :)

    0
  62. 85

    Ok so I loooove this article. One of the smoothest tutorials I have read. I love CSS and learning CSS3 is very fun an exciting.

    I just have one measly question about this slider. How do you get it to work with less or more slides? I am trying to get it to work with 4 images. I have literally eliminated all code both in the HTML and the CSS that has to do with the fifth cycle but it still goes to the cycle, only showing a black screen. I just can’t seem to figure out how to prevent it! I understand too that I will want to adjust the percentages, but first, I’m trying to get rid of that fifth cycle! I must be missing something in the code.

    Help please? :)

    0
  63. 86

    Would be nice to have an IE fallback — even if just a static image. I guess it’s not too hard to tweak/add though.

    0
  64. 87

    No support ie7
    Jquery animal effect good
    http://dakdoa.com/jquery-slider-css3

    0
  65. 88

    Hi
    Thanks fo the awsom work….!!!
    I tried to reduce the number of images.
    But i am getting somthing wrong. Blank space is shown and the loop is shown for the 5 images. Help me plaese../.
    Thank You

    0
  66. 89

    Wow thats great, now designer have no need to Jquery Programming.

    Thank U and thanks CSS3

    0
  67. 90

    Hey man, millions of thanks for you generous!!!
    This is really help tutorial……

    0
  68. 91

    Hello!! I am trying to learn CSS3 , and my problem is that , I have made up a html file and css file ,which is nodepad and also have given a link between html and css link rel=”stylesheet” type=”text/css” href=”Far.css”> but nothing is showing up in google chrome browser , can you show me the , how to give a main link of div ,so that both css and html can cooperate ???

    0
  69. 92

    Hi! Have somebody any idea how I can turn this into a 10 pic slideshow?

    0
  70. 93

    Fast and Smooth. Very useful. Thanks.

    0
  71. 94

    Thank you for this great tutorial! Now that IE 10 is out, I couldn’t figure out why this wasn’t working with IE! Well duh, the code isn’t in the demo file to work with IE! So I added a bit of code without the -moz- or -webkit- and it works like a charm in IE now. Thanks a lot! (You might want consider updating the zip folder to include this code.)

    0
    • 95

      Hi Jacob,
      Thank you for the hint, I wondered about Explorer too, knew the newer one was supposed to work.
      As you suggested I added a third line after EACH of the -moz- and -webkit- prefaced ones without that reference and it works fine on IE 10.
      Now I can actually use this on my sites and it is perfect.
      I pulled out the progress bar, resized it and got rid of all the page formatting stuff.
      Going to make the HTML code an insertable HTML template in Arachnophilia.
      Great fun to see what you can do with the various transition and animation options.
      Best Regards,
      Gary McCray

      0
  72. 96

    Hello,

    i’ve had some really stupid mistakes with my code ive created…

    http://demo.alphaxray.de/test.php will show it…

    where is the problem ? -> Ive wrote a php Class Method for autoscaleing the image size and the time duration but it wouldn’t work so long…. i hope someone could help me out of this horrible station oof my coding career

    0
  73. 97

    its a nice slide show :)

    i just have one question: Why is it not functioning in Google Chrome?

    im looking forward on getting replies .
    thanks and have a good day :)

    0
  74. 98

    nice article

    0
  75. 99

    Is possible to define the image inside the css?

    0
  76. 100

    How to move the slides from left to right, right to left OR bottom to top?

    0
  77. 101

    Thanks Bro Its Helps Alot ….. a Big “Kudos ” 2 u bro …:D

    0
  78. 102

    Thank you very much, you helped me a lot! Only one question, is there a way to put arrows in it to manually pass the images?

    0
  79. 103

    The body css tag to align baseline in the reset.css file REALLY messed me up in my template till I realized and removed it! I couldn’t figure out why my table wouldn’t align top.

    0
  80. 104

    How to get the images to have rounded corners in Chrome? Ughhh…

    0
  81. 105

    Many people myself included are asking how to add or subtract images to the 5 count. Please answer us!

    0
  82. 106

    Guys I got the solution for adding more images… 10 in this case. Please thank me there for this post: http://www.dynamicdrive.com/forums/showthread.php?74745-More-than-5-Images-in-Slide-Show&p=298352

    Enjoy!

    0
  83. 107

    @import url(“reset.css”) screen;
    @import url(“animation.css”) screen;

    where can I get this two(2) imports?

    0
  84. 108

    i will give it a trial and get back to u. But i believe it i will get what am looking for.

    0
  85. 109

    I like this CSS3 effects …
    Thanks to your work….

    0
  86. 110

    Very nice tutorial. Big THANKS !!!
    I found that it’s possible to add user control navigation by using animation-delay on the previous/next button, example: animation-delay:-5s; so the animation will jump to the 4th slide, -10s will jump to the 3rd slide and so on..

    once again, thank you Alessio !!

    0
    • 111

      hey dhira, I saw your comment but can’t get it to work. what does your code look like? thanks for any help you can give me!

      0
    • 112

      Same goes for me. Tried alot. It is possible to pause with a button, but I cant seem to use the animation-delay for a button.

      0
  87. 113

    i was really helpful and im using this animation in my website but i want it to be animate from right side not from top. and next thing i’m using only 3 pictures so the mathematical problem is getting my head off. can anyone please help me. im beginner in css so any help will be appreciated.

    its also affecting the jquery ive used for menu bar.

    Thank you in advance.

    0
  88. 114

    hye
    can someone please tell me how set keyframes for only three images?
    please tell me ASAP

    0
    • 115

      Well, I’m very late to this, but it gets a little bit complicated to add or remove images. Long story short, you need to rewrite the timings for all of the keyframes, here’s why:

      This slide-show works with five simultaneous animations at once, the animations are perfectly timed in coincidence with one another so that as one image is sliding out of view, the next image is sliding in. The issue with removing an image is that the other four animations will play normally as though image five still exists, except nothing will appear when image five is supposed to appear, because image five doesn’t exist. Removing image five and it’s respective animations does not change how the other animations behave.

      For example, I’m using a four image version of this slide-show (don’t blindly copy/paste my CSS! I messed around with a few things, such as image size, slide direction, and the progress bar. This is just a snippet of my CSS), and my keyframes look like this:

      @-webkit-keyframes cycle {
      0% { left:0px; }
      5% { left:0px; }
      20% { left:0px; opacity:1; z-index:0; }
      25% { left:1005px; opacity:0; z-index:0; }
      26% { left:-1005px; opacity:0; z-index:-1; }
      92% { left:-1005px; opacity:0; z-index:0; }
      95% { left:-1005px; opacity:0; }
      100%{ left:0px; opacity:1; }

      }
      @-webkit-keyframes cycletwo {
      0% { left:-1005px; opacity:0; }
      20% { left:-1005px; opacity:0; }
      25% { left:0px; opacity:1; }
      30% { left:0px; opacity:1; }
      45% { left:0px; opacity:1; z-index:0; }
      50% { left:1005px; opacity:0; z-index:0; }
      51% { left:-1005px; opacity:0; z-index:-1; }
      100%{ left:-1005px; opacity:0; z-index:-1; }
      }
      @-webkit-keyframes cyclethree {
      0% { left:-1005px; opacity:0; }
      45% { left:-1005px; opacity:0; }
      50% { left:0px; opacity:1; }
      55% { left:0px; opacity:1; }
      70% { left:0px; opacity:1; }
      75% { left:1005px; opacity:0; z-index:0; }
      81% { left:-1005px; opacity:0; z-index:-1; }
      100%{ left:-1005px; opacity:0; z-index:-1; }
      }
      @-webkit-keyframes cyclefour {
      0% { left:-1005px; opacity:0; }
      70% { left:-1005px; opacity:0; }
      75% { left:0px; opacity:1; }
      80% { left:0px; opacity:1; }
      95% { left:0px; opacity:1; z-index:0; }
      100%{ left:1005px; opacity:0; z-index:0; }
      }
      Notice how all of the percentages are different than the original keyframes, and some changes have been made to cycle four.

      These four animations all run at once, so when cycle one is at 20%, image one will be at { left:0px; opacity:1; z-index:0; }(in the frame, fully visible), but at the same time cycle two is at 20%, and therefore image two will be at { left:-1005px; opacity:0; }(fully out of frame to the left, invisible), this means that between 20% and 25% image one will move to { left:1005px; opacity:0; z-index:0; }(fully out of frame to the right, invisible) and image two will move to { left:0px; opacity:1; }(in the frame, fully visible).

      Observe the keyframes in your CSS closely, add comments to each one to let yourself know what it does. Then you can look at commenting out one of the cycles, and trying to rearrange the remaining keyframes to get perfect coincidence.

      0
  89. 116

    Hello,

    Thanking you for sharing.

    how set keyframes for only 4 images with arrows ?

    1
  90. 117

    HI, there’s another problem i found, this code is not good for mobile devices. The slides does not return back to its original slide after the last image. I checked on a few devices and still the same problem, is there a fix for this?

    0
  91. 118

    Should this work with jQuery noconflict mode? I can’t seem to get it to work.

    Uncaught TypeError: undefined is not a function on line 38 => _window = $(window),

    0
  92. 119

    Looks very nice, good work man :)

    0
  93. 120

    Very nice article…. thanks

    0
  94. 121

    I cant seem to get the tooltips or pause to work. Any ideas what I might have done wrong?

    0
  95. 122

    Loved this tute. One thing I am having trouble with is making it responsive. I can get it so the image is masked to the right as the screen rez decreases. I can make the image resize to fit the div. What I cannot do it make the div wrap around the image as it decreases, even with a clear div tag. Any ideas?

    0
  96. 123

    Its only works in Mozilla Firefox, not working in IE. How to fix it??

    0
  97. 125

    Thanks man! this is really helpful and super-smooth!
    I’m from Rome too, is crazy to think that I’m reading your post all the way from San Francisco where I’m studying front-end developing

    0
  98. 126

    Great tutorial! It helped me understand CSS3 better. More tutorials are always welcome. Thanks!

    0
  99. 127

    Sad there is no tut how to add arrows and buttons.

    0
  100. 129

    the tooltip….
    #slider: hover …….very funny >_> was stuck there for a while (tooltip not working as hover function not called out properly, should be :hover)

    0
  101. 130

    The styles and code are useful in my learning of animation technics and need for my experiences in methods of programming to be able to enhance my learning, for what to use to be able to get different browsers to function as desired. Thank You for your explanations and code for creating thoughts to a better understanding.

    0
  102. 131

    1. In one of the comments above (Sept. 2013), Dhira said that we was able to implement manual control by using negative values for animation-delay. Has somebody done it, can we see a working example? This would be great news!

    2. Has somebody implemented the fallback for older browsers, with modernizr, as Alessio suggested?

    Thanks to all and have a great day!

    0
  103. 132

    Anyone can explain how to change the @keyframe cycle to 7 images?

    0
    • 133

      This is the fallback of this particular method, it is not simple to add or remove images. Look at my explanation above for more detail. Basically, you have to rewrite all of the timings for the keyframes, adjust what some of the keyframes do, and (because you’re adding a significant amount of images) you will need to increase the amount of time the animations take. For practicality purposes, you would be better off finding a good JS slide-show.

      0
  104. 134

    Hello—
    This is great. How could I add a link to each image, so if someone clicked on an image, they could browse to another page?
    Thanks.

    0
    • 135

      In the HTML you will see that all of the img tags are already contained by a tags. Simply replace the ‘#’ with your desired URL.

      0
  105. 136

    Well, this is a bummer. It doesn’t work for me. I’ve even made some sample images and uploaded them and they don’t show up either. Dang, I was so hopeful.

    0
  106. 137

    phadindra bhandari

    April 1, 2014 6:00 am

    yes thank you very much it’s very helpful for me

    0
  107. 138

    Awesome tutorial, because of people like you we can all have happy CODING. Thanks

    1
  108. 139

    To make sure you can add multiple images you can make a php class to obtain the flexibility you need.
    You can make a constructor where you fill in the width, height, seconds to display image, seconds for transition, path to folder with images.

    You can easily compute the variables needed to write the code for the animation.css, style.css and the html code.

    Good luck! And thanks for sharing!!

    0
  109. 140

    nice tutorial! but I’m kinda confused, i have read through it all and there is so many different sections of css needed and repeated, I’m not sure what to do! can someone please post the full css code, it would be much easier. thank you!!

    0
  110. 141

    Hello All… Its a nice tutorial… With the help of this we came to know how to remove and add the images…This is done by our great mathematician Miss Gurleen Kaur…. Thanks Alot.. Great Tutorial…

    0
  111. 142

    Really great, thank you. BUT, can you say me pls, how can I reduce the number of slider to 3? I tried to delete the 4th and 5th slides from .ccs and .html files, but so I have an empty space at the end of the animation.

    0
  112. 143

    Great slider but is it possible to add buttons for selected slides?

    0
  113. 144

    This is a very amazing tutorial! I will be trying out some of it later. But on a side note, what must be changed to make the slider differently sized? I am planning to try and incorporate this somewhere in a project of mine… Thanks, WisdomFire.

    0
    • 145

      wisdomfire, it is very easy to change the size of the slideshow for different purposes. All that really needs to be changed is the width and height for #slider, #slider li, and .progress-bar. Changing those values in those three CSS selectors should give you a differing size slideshow. Also, you may need to change the margin spacing throughout the code.

      0
  114. 146

    Awesome website you have got right here.

    0
  115. 147

    This technique is great! I’m implementing it on a site I am building now! One question though, anyone know how I could get the images in the slideshow to center?

    Some of my images are a little small for the size I have set, and I don’t want to set it lower thus losing the edges of my other pictures. I also want the site to display well in most resolutions. I have tried adding margin-left: auto; and margin-right: auto; onto the pictures, but this doesn’t seem to do anything. If anyone could help me out, I would really appreciate it!

    0
  116. 148

    I adapted this for something I’m working on. All I changed was the dimensions since the images were a different size. The first image is halfway into the window, and stuck there. I tried a couple different browsers and experienced the same result. Would changing the dimensions cause the animation to stop, or is it more likely that I made a mistake somewhere else?

    0
  117. 150

    Thank you Alessio,

    For some time I have wanted to have some slide shows on my web site, but I have not undertaken them because I didn’t want to do them in Javascript because too many people have it disabled.

    I am very new to CSS3 but your tutorial is making it easy to come up with a very usable slide show template for both my dronesarefun.com site and my wifes mccraystudios.com jewelry site.

    I still have much tweaking to do, but I already have it working very nicely in my own CSS page and my basic drones are fun blank template HTML page.

    Customizing it and making an Arachnophilia template for the HTML should be the fun part.

    Thank You again,

    Gary McCray

    1
  118. 151

    Thank you for sharing your knowledge!
    Very kind of you!

    I found what I need but I’m having some troubles with the tooltip. The names of the pictures doesn’t show on my screen . I have windows 8.0 so I hope the IE isn’t the problem. Also, I can’t get this to work with crome.

    Any suggestions?

    0
  119. 152

    Thanks for sharing,

    0
  120. 153

    Works fine in I.E. and Firefox, but the same code in Chrome displays a frozen portion of an image on load and stays there. I even tried using prefixes. Any thoughts??

    0
  121. 154

    Nice Tutorial. But personally I think JQuery can be used to achieve the same goal with less line of codes. Still, it’s always good to have tutorial like this.

    0
  122. 155

    I’m using Dreamweaver CS6 and it does not work there!

    0
  123. 156

    ບູນທອນ ຊະນະສີນ

    October 18, 2014 3:09 am

    I have Dreamweaver but never use them and I only use TeraPad for edit my work and hope to use them if I have to do more pages.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top