By Alessio Atzeni

Published on April 25th, 2012 in CSS3 with 77 Comments

Thanks to CSS3, we can create effects and animations without using J avaScript, 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 well
discuss how to create an infinitely looping slider of images using only CSS3 ani mati on.
SECTI ONS OF THI S ARTI CL E
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 onl y work properl y i n modern browsers that support the
CSS3 properti es being used.
Introduction
Learn basic concepts related to CSS3 transitions and keyframe animation.
1.
HTML markup
Create the HTML markup for the sliding images.
2.
CSS styles
Create the style sheet to display the slider.
3.
CSS3 keyframe animation
Add animation to the slider (well explain the various processes happening here).
4.
Progress bar
Add a progress bar for our slider.
5.
Tooltip
Add a tooltip to display the title of the image.
6.
CSS3 transitions 7.
Animate the tooltip using CSS3 transitions to make it appear to hover over the
image.
Pause and restart
Pause the slider and restart it on hover.
8.
Demo
Check out the slider in action.
9.
Conclusion
Final considerations.
10.
Screenshot of the pure CSS3 cycling slideshow .
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.
1
BASI C CONCEPTS OF CSS3 TRANSI TI ONS
Normally when you change a CSS value, the change is instant. Now, thanks to the transi ti on
property, we can easily animate from the old to new state.
We can use four transition properties:
t r ansi t i on- pr oper t y
Defines the name(s) of the CSS properties to which the transitions should be
applied.
1.
t r ansi t i on- dur at i on
Defines the duration over which the transitions should occur.
2.
t r ansi t i on- t i mi ng- f unct i on
Determines how intermediate values of the transition are calculated. The effects
from the timing function are commonly called easing functions.
3.
t r ansi t i on- del ay
Defines when the transition starts.
4.
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, prefi xes for browsers are
requi red. 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.
Lets see how to apply a simple transition to a link:
01 a {
02 col or : #000;
03 t r ansi t i on- pr oper t y: col or ;
04 t r ansi t i on- dur at i on: 0. 7s;
05 t r ansi t i on- t i mi ng- f unct i on: ease- i n;
06 t r ansi t i on- del ay: 0. 3s;
07 }
08
09 a: hover {
10 col or : #f f f ;
11 }
When assigning an animation to an element, you can also use the shorthand:
1 a {
2 col or : #000;
3 t r ansi t i on: col or 0. 7s ease- i n 0. 3s;
4 }
5
6 a: hover {
7 col or : #f f f ;
8 }
The W3C has a list of all Animatable Properties .
BASI C CONCEPTS OF CSS3 ANI MATI ONS
CSS animation enables us to create animations without J avaScript 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:
ani mat i on- del ay
Defines when the animation starts.
1.
ani mat i on- di r ect i on
Sets the animation to play in reverse on alternate cycles.
2.
ani mat i on- dur at i on
Defines the length of time an animation takes to complete one cycle.
3.
ani mat i on- i t er at i on- count
Defines the number of times an animation cycle should play before stopping.
4.
ani mat i on- name
Specifies the name of the @keyf r ames rule.
5.
ani mat i on- pl ay- st at e
Determines whether an animation is running or paused.
6.
ani mat i on- t i mi ng- f unct i on
Describes how an animation progresses over one cycle.
7.
ani mat i on- f i l l - mode
Specifies how a CSS animation should apply styles to its target before and after
8.
2
executing.
Lets see how to apply a simple animation to a div.
01 / * Thi s i s t he el ement we ar e appl yi ng t he ani mat i on t o. */
02
03 di v {
04 ani mat i on- name: move;
05 ani mat i on- dur at i on: 1s;
06 ani mat i on- t i mi ng- f unct i on: ease- i n- out ;
07 ani mat i on- del ay: 0. 5s;
08 ani mat i on- i t er at i on- count : 2;
09 ani mat i on- di r ect i on: al t er nat e;
10
11 - moz- ani mat i on- name: move;
12 - moz- ani mat i on- dur at i on: 1s;
13 - moz- ani mat i on- t i mi ng- f unct i on: ease- i n- out ;
14 - moz- ani mat i on- del ay: 0. 5s;
15 - moz- ani mat i on- i t er at i on- count : 2;
16 - moz- ani mat i on- di r ect i on: al t er nat e;
17
18 - webki t - ani mat i on- name: move;
19 - webki t - ani mat i on- dur at i on: 1s;
20 - webki t - ani mat i on- t i mi ng- f unct i on: ease- i n- out ;
21 - webki t - ani mat i on- del ay: 0. 5s;
22 - webki t - ani mat i on- i t er at i on- count : 2;
23 - webki t - ani mat i on- di r ect i on: al t er nat e;
24 }
25
26 / * Thi s i s t he ani mat i on code. */
27
28 @keyf r ames move {
29 f r om{
30 t r ansf or m: t r ansl at eX( 0) ;
31 }
32 t o {
33 t r ansf or m: t r ansl at eX( 100px) ;
34 }
35 }
36
37 @- moz- keyf r ames move {
38 f r om{
39 - moz- t r ansf or m: t r ansl at eX( 0) ;
40 }
41 t o {
42 - moz- t r ansf or m: t r ansl at eX( 100px) ;
43 }
44 }
45
46 @- webki t - keyf r ames move {
47 f r om{
48 - webki t - t r ansf or m: t r ansl at eX( 0) ;
49 }
50 t o {
51 - webki t - t r ansf or m: t r ansl at eX( 100px) ;
52 }
53 }
But we can use the shorthand property to conveniently set all of the animation properties at
once.
1 di v {
2 ani mat i on: move 1s ease- i n- out 0. 5s 2 al t er nat e;
3 - moz- ani mat i on: move 1s ease- i n- out 0. 5s 2 al t er nat e;
4 - webki t - ani mat i on: move 1s ease- i n- out 0. 5s 2 al t er nat e;
5 }
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.
01 / * Ani mat i on f r om0%t o 100%*/
02
03 @keyf r ames move {
04 0%{ t r ansf or m: t r ansl at eX( 0) ; }
05 100%{ t r ansf or m: t r ansl at eX( 100px) ; }
06 }
07
08 / * Ani mat i on wi t h i nt er medi at e keyf r ames */
09
10 @keyf r ames move {
11 0%{ t r ansf or m: t r ansl at eX( 0) ; }
12 50%{ t r ansf or m: t r ansl at eX( 20px) ; }
13 100%{ t r ansf or m: t r ansl at eX( 100px) ; }
14 }
The W3C has a lot of useful and detailed information on CSS3 Animations.
BASI C STRUCTURE OF OUR SL I DER
Now that we know how transitions and animation work, lets see how to create our slider using
only CSS3. This sketch shows how the animation should work:
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 t op property
and changing the z- i ndex and opaci t y properties when the image returns to its initial position.
Lets dive right into the HTML markup to create the slider.
The HTML markup is very simple; its all organized and SEO-friendly. Lets see the full code
first and then figure out in detail how everything works.
01 <di v cl ass=" cont ai ner " >
02 <di v i d=" cont ent - sl i der " >
03 <di v i d=" sl i der " > <! - - Sl i der cont ai ner - - >
04 <di v i d=" mask" > <! - - Mask - - >
05
06 <ul >
07
<l i i d=" f i r st " cl ass=" f i r st ani mat i on" > <! - - I D f or t ool t i p and cl ass f or
ani mat i on - - >
08 <a hr ef =" #" > <i mg sr c=" i mages/ i mg_1. j pg" al t =" Cougar " / > </ a>
09 <di v cl ass=" t ool t i p" > <h1>Cougar </ h1> </ di v>
10 </ l i >
11
12 <l i i d=" second" cl ass=" secondani mat i on" >
13 <a hr ef =" #" > <i mg sr c=" i mages/ i mg_2. j pg" al t =" Li ons" / > </ a>
14 <di v cl ass=" t ool t i p" > <h1>Li ons</ h1> </ di v>
15 </ l i >
16
17 <l i i d=" t hi r d" cl ass=" t hi r dani mat i on" >
18 <a hr ef =" #" > <i mg sr c=" i mages/ i mg_3. j pg" al t =" Snowal ker " / > </ a>
19 <di v cl ass=" t ool t i p" > <h1>Snowal ker </ h1> </ di v>
20 </ l i >
21
22 <l i i d=" f our t h" cl ass=" f our t hani mat i on" >
23 <a hr ef =" #" > <i mg sr c=" i mages/ i mg_4. j pg" al t =" Howl i ng" / > </ a>
24 <di v cl ass=" t ool t i p" > <h1>Howl i ng</ h1> </ di v>
25 </ l i >
26
27 <l i i d=" f i f t h" cl ass=" f i f t hani mat i on" >
28 <a hr ef =" #" > <i mg sr c=" i mages/ i mg_5. j pg" al t =" Sunbat hi ng" / > </ a>
29 <di v cl ass=" t ool t i p" > <h1>Sunbat hi ng</ h1> </ di v>
30 </ l i >
31 </ ul >
32
33 </ di v> <! - - End Mask - - >
34 <di v cl ass=" pr ogr ess- bar " ></ di v> <! - - Pr ogr ess Bar - - >
35 </ di v> <! - - End Sl i der Cont ai ner - - >
36 </ di v>
37 </ di v>
di v i d=" sl i der "
This is the main container of the slider. It does not have a particular function, but
we will need it to pause the animation.
1.
di v i d=" 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.
2.
l i i d=" f i r st " cl ass=" f i r st ani mat i on"
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.
3.
di v cl ass=" t ool t i p"
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.
4.
di v cl ass=" pr ogr ess- bar "
This contains the function that shows the progress of the animation.
5.
Now its time for the CSS file.
Lets 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.
01 / * SLI DER STRUCTURE */
02
03 #sl i der {
04 backgr ound: #000;
05 bor der : 5px sol i d #eaeaea;
06 box- shadow: 1px 1px 5px r gba( 0, 0, 0, 0. 7) ;
07 hei ght : 320px;
08 wi dt h: 680px;
09 mar gi n: 40px aut o 0;
10 over f l ow: vi si bl e;
11 posi t i on: r el at i ve;
12 }
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.
1 / * HI DE ALL OUTSI DE OF THE SLI DER */
2
3 #mask {
4 over f l ow: hi dden;
5 hei ght : 320px;
6 }
Finally, to sort the list of images, well have posi t i on: absol ut e and top: -325px so that all of
the images are positioned outside of the slider.
01 / * I MAGE LI ST */
02
03 #sl i der ul {
04 mar gi n: 0;
05 paddi ng: 0;
06 posi t i on: r el at i ve;
07 }
08
09 #sl i der l i {
10 wi dt h: 680px; / * Wi dt h I mage */
11 hei ght : 320px; / * Hei ght I mage */
12 posi t i on: absol ut e;
13 t op: - 325px; / * Or i gi nal Posi t i on - Out si de of t he Sl i der */
14 l i st - st yl e: none;
15 }
With these few lines of code, we have created our slider. Now we just need to add the
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, lets 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:
Defi ne the total number of i mages to use i n the sl i der
5
1.
Defi ne the l ength of ani mati on for each i mage
5 seconds
2.
Defi ne the total durati on of the ani mati on
Multiply the total number of images by the duration of each image:
5 images 5 seconds =25 seconds
3.
Cal cul ate how many keyframes equal s 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
4.
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.
01 #sl i der l i . f i r st ani mat i on {
02 ani mat i on: cycl e 25s l i near i nf i ni t e;
03 }
04
05 #sl i der l i . secondani mat i on {
06 ani mat i on: cycl et wo 25s l i near i nf i ni t e;
07 }
08
09 #sl i der l i . t hi r dani mat i on {
10 ani mat i on: cycl et hr ee 25s l i near i nf i ni t e;
11 }
12
13 #sl i der l i . f our t hani mat i on {
14 ani mat i on: cycl ef our 25s l i near i nf i ni t e;
15 }
16
17 #sl i der l i . f i f t hani mat i on {
18 ani mat i on: cycl ef i ve 25s l i near i nf i ni t e;
19 }
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.
Ive added the opaci t y and z- i ndex 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:
01 / * ANI MATI ON */
02
03 @keyf r ames cycl e {
04
0% { t op: 0px; } / * When you st ar t t he sl i de, t he f i r st i mage i s al r eady
vi si bl e */
05 4% { t op: 0px; } / * Or i gi nal Posi t i on */
06
16%{ t op: 0px; opaci t y: 1; z- i ndex: 0; } / * Fr om4%t o 16 %= f or 3 seconds t he
i mage i s vi si bl e */
07
20%{ t op: 325px; opaci t y: 0; z- i ndex: 0; } / * Fr om16%t o 20%= f or 1 second
exi t i mage */
08 21%{ t op: - 325px; opaci t y: 0; z- i ndex: - 1; } / * Ret ur n t o Or i gi nal Posi t i on */
09 92%{ t op: - 325px; opaci t y: 0; z- i ndex: 0; }
10
96%{ t op: - 325px; opaci t y: 0; } / * Fr om96%t o 100%= f or 1 second ent er
i mage*/
11 100%{ t op: 0px; opaci t y: 1; }
12 }
13
14 @keyf r ames cycl et wo {
15 0% { t op: - 325px; opaci t y: 0; } / * Or i gi nal Posi t i on */
16 16%{ t op: - 325px; opaci t y: 0; }/ * St ar t s movi ng af t er 16%t o t hi s posi t i on */
17 20%{ t op: 0px; opaci t y: 1; }
18 24%{ t op: 0px; opaci t y: 1; } / * Fr om20%t o 24%= f or 1 second ent er i mage*/
19
36%{ t op: 0px; opaci t y: 1; z- i ndex: 0; } / * Fr om24%t o 36 %= f or 3 seconds
t he i mage i s vi si bl e */
20
40%{ t op: 325px; opaci t y: 0; z- i ndex: 0; } / * Fr om36%t o 40%= f or 1 second
exi t i mage */
21
41%{ t op: - 325px; opaci t y: 0; z- i ndex: - 1; } / * Ret ur n t o Or i gi nal Posi t i on
*/
22 100%{ t op: - 325px; opaci t y: 0; z- i ndex: - 1; }
23 }
24
25 @keyf r ames cycl et hr ee {
26 0% { t op: - 325px; opaci t y: 0; }
27 36%{ t op: - 325px; opaci t y: 0; }
28 40%{ t op: 0px; opaci t y: 1; }
29 44%{ t op: 0px; opaci t y: 1; }
30 56%{ t op: 0px; opaci t y: 1; }
31 60%{ t op: 325px; opaci t y: 0; z- i ndex: 0; }
32 61%{ t op: - 325px; opaci t y: 0; z- i ndex: - 1; }
33 100%{ t op: - 325px; opaci t y: 0; z- i ndex: - 1; }
34 }
35
36 @keyf r ames cycl ef our {
37 0% { t op: - 325px; opaci t y: 0; }
38 56%{ t op: - 325px; opaci t y: 0; }
39 60%{ t op: 0px; opaci t y: 1; }
40 64%{ t op: 0px; opaci t y: 1; }
41 76%{ t op: 0px; opaci t y: 1; z- i ndex: 0; }
42 80%{ t op: 325px; opaci t y: 0; z- i ndex: 0; }
43 81%{ t op: - 325px; opaci t y: 0; z- i ndex: - 1; }
44 100%{ t op: - 325px; opaci t y: 0; z- i ndex: - 1; }
45 }
46 @keyf r ames cycl ef i ve {
47 0% { t op: - 325px; opaci t y: 0; }
48 76%{ t op: - 325px; opaci t y: 0; }
49 80%{ t op: 0px; opaci t y: 1; }
50 84%{ t op: 0px; opaci t y: 1; }
51 96%{ t op: 0px; opaci t y: 1; z- i ndex: 0; }
52 100%{ t op: 325px; opaci t y: 0; z- i ndex: 0; }
53 }
Having created the animations, we have to add a progress bar to display the duration of each
animation.
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:
01 / * PROGRESS BAR */
02
03 . pr ogr ess- bar {
04 posi t i on: r el at i ve;
05 t op: - 5px;
06 wi dt h: 680px;
07 hei ght : 5px;
08 backgr ound: #000;
09 ani mat i on: f ul l expand 25s ease- out i nf i ni t e;
10 }
Dont be afraid of the syntax here. It has the same function as f r omt o; you can see that the
keyframes set the appearance and disappearance of each image.
01 / * ANI MATI ON BAR */
02
03 @keyf r ames f ul l expand {
04 / * I n t hese keyf r ames, t he pr ogr ess- bar i s st at i onar y */
05 0%, 20%, 40%, 60%, 80%, 100%{ wi dt h: 0%; opaci t y: 0; }
06
07 / * I n t hese keyf r ames, t he pr ogr ess- bar st ar t s t o come al i ve */
08 4%, 24%, 44%, 64%, 84%{ wi dt h: 0%; opaci t y: 0. 3; }
09
10 / * I n t hese keyf r ames, t he pr ogr ess- bar moves f or war d f or 3 seconds */
11 16%, 36%, 56%, 76%, 96%{ wi dt h: 100%; opaci t y: 0. 7; }
12
13 / * I n t hese keyf r ames, t he pr ogr ess- bar has f i ni shed hi s pat h */
14 17%, 37%, 57%, 77%, 97%{ wi dt h: 100%; opaci t y: 0. 3; }
15
16
/ * I n t hese keyf r ames, t he pr ogr ess- bar wi l l di sappear and t hen r esume t he
cycl e */
17 18%, 38%, 58%, 78%, 98%{ wi dt h: 100%; opaci t y: 0; }
18 }
The slider is more or less complete, but lets add a few details to make it more functional. Well
insert tooltips for the image titles that will be visible on hover.
Simple tooltip
Here is the CSS for the tooltips:
01 #sl i der . t ool t i p {
02 backgr ound: r gba( 0, 0, 0, 0. 7) ;
03 wi dt h: 300px;
04 hei ght : 60px;
05 posi t i on: r el at i ve;
06 bot t om: 75px;
07 l ef t : - 320px;
08 }
09
10 #sl i der . t ool t i p h1 {
11 col or : #f f f ;
12 f ont - si ze: 24px;
13 f ont - wei ght : 300;
14 l i ne- hei ght : 60px;
15 paddi ng: 0 0 0 10px;
16 }
Here weve made only the image titles visible, but you can do the same to custom text, links or
whatever you like.
Animate the tooltip on hover
We have seen how to apply CSS3 transitions to elements; now lets do it to the tooltips.
If you remember, we added an ID to each list (f i r st , second, etc.) to have only the tooltip
associated with an image appear on hover, rather than all of the tooltips appear together.
01 #sl i der . t ool t i p {
02
03 t r ansi t i on: al l 0. 3s ease- i n- out ;
04 }
05
06 #sl i der l i #f i r st : hover . t ool t i p,
07 #sl i der l i #second: hover . t ool t i p,
08 #sl i der l i #t hi r d: hover . t ool t i p,
09 #sl i der l i #f our t h: hover . t ool t i p,
10 #sl i der l i #f i f t h: hover . t ool t i p {
11 l ef t : 0px;
12 }
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. (Well also have to stop the animation of the progress bar.)
1 #sl i der : hover l i ,
2 #sl i der : hover . pr ogr ess- bar {
3 ani mat i on- pl ay- st at e: paused;
4 }
Finally, weve reached the end of the tutorial. The slider is now 100% complete!
Pure CSS3 cycling slider demo
Check out the demo . It works in Firefox 5+, Safari 4+and Google Chrome, as well as the
iPhone and iPad. You can also download the ZIP file.
Thanks to Massimo Righi for his images.
3
4
5
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
J avaScript 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+.
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 J avaScript 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 ful l support among
browsers, this is not possible, so J avaScript 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:
CSS3 cycling slideshow - http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
Animatable Properties - http://www.w3.org/TR/css3-transitions/#properties-from-css-
http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
Check out the demo - http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/
Massimo Righi - http://www.massimorighi.com
With a commitment to quality content for the design community.
Smashing Media. Made in Germany. 2006-2012. About / Impressum.
http://www.smashingmagazine.com
1
2
3
4
5