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. 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:

transition-property
Defines the name(s) of the CSS properties to which the transitions should be applied.

transition-duration
Defines the duration over which the transitions should occur.

transition-timing-function
Determines how intermediate values of the transition are calculated. The effects from the timing function are commonly called easing functions.

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.

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.

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

4. CSS3 Keyframes 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:

Define the total number of images to use in the slider
5

Define the length of animation for each image
5 seconds

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

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.

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.

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.

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+.

Philip Wallage

Alessio Atzeni

ronn

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

5

6

Pratyush

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/

Krsiak Daniel

Alex

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!

RudiBaum

Alex

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.

Pritesh Gupta

Niels Matthijs

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.

Thomas

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

38

Alessio Atzeni

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

39

Thomas

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 :(

RudiBaum

Raphael

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

43

Alessio Atzeni

David Diaz

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.

Agustin

Pratyush

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.

Vin Gaeta

Josh B.

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

61

Vadim Makeev

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.

Brian

Kate

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

74

Gonzalo

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

75

trung

Eiríkur Jónsson

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

77

Sean Taylor

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.

artistaq8

Christine

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.

Karma Choedak

Muhammed

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

92

Ole-Martin

Baris Mancar

Jacob

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

Gary McCray

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

96

Arne

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

asan

Dhira

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..

F. Sancak

ashok

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.

ahmedmalik93

K7

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:

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.

2

116

Devang Solanki

ronn

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?

Gaynor

Paul

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?

Student

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

131

Cristian

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

132

Jorge

K7

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.

Amyn

F. Sancak

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

140

Joanna

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!!

peanutcat

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

143

Ivan

wisdomfire

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

Matthew

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.

Buford

mick

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

148

Jay

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?

Tania Allen

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

152

cvg

In “#slider li#first: hover .tooltip” remove the space inbetween “first:” and “hover” (write “first:hover”). Do the same for second, third, fourth and fifth and don’t forget to change it also in “#slider: hover li,
#slider: hover .progress-bar”.
For use with chrome add -webkit- to animation (-webkit-animation), keyframes (@-webkit-keyframes), transition (-webkit-transition) and animation-play-state (-webkit-animation-play-state).
Had the same problems. ;-)

cvg

Thank you very much for this great tutorial! It was exactly what I was looking for with a very good explanation of all details. For use in firefox, chrome, ie, opera and safari I added -moz-, -webkit-, -o- and -ms- to
animation (-xxx-animation, keyframes (@-xxx-keyframes), transition (-xxx-transition) and animation-play-state (-xxx-animation-play-state). It works in all current versions of these browsers. :-)
Please remove the space inbetween “first:” and “hover” at the explanation for adding the tooltip. Then everything works fine.
Kind regards

kelly

Ramvignesh Pasupathy

Nice article. I tried to make one cycling slide show like this. To start off I used all the codes in this article. I don’t know what went wrong. Only the first image is visible in the cycle. And I’m sure the rest of the images aren’t broken. I have checked them. Can you please help me to resolve this? The following is my code.

SmashingConf isn't the eighth wonder of the world, but we are pretty close. Join us at SmashingConf Oxford on March 16–19 or meet us at the shores of Santa Monica for SmashingConf LA on April 27–30. You won't be disappointed.