a pure css3 cycling slideshow _ smashing coding

By Alessio Atzeni

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

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

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

SECT I ONS OF T HI S ART I 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 only work properly in modern browsers that support theCSS3 properties being used.

IntroductionLearn basic concepts related to CSS3 transitions and keyframe animation.

1.

HTML markupCreate the HTML markup for the sliding images.

2.

CSS stylesCreate the style sheet to display the slider.

3.

CSS3 keyframe animationAdd animation to the slider (well explain the various processes happening here).

4.

Progress barAdd a progress bar for our slider.

5.

TooltipAdd a tooltip to display the title of the image.

6.

CSS3 transitions7.

Animate the tooltip using CSS3 transitions to make it appear to hover over theimage.

Pause and restartPause the slider and restart it on hover.

8.

DemoCheck out the slider in action.

9.

ConclusionFinal considerations.

10.

Screenshot of the pure CSS3 cycling slideshow .

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

1

BASI C CONCEPT S OF CSS3 T RANSI T I ONS

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

We can use four transition properties:

transition-propertyDefines the name(s) of the CSS properties to which the transitions should beapplied.

1.

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

2.

transition-timing-functionDetermines how intermediate values of the transition are calculated. The effectsfrom the timing function are commonly called easing functions.

3.

transition-delayDefines when the transition starts.

4.

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

Lets see how to apply a simple transition to a link:

01 a {

02 color: #000;

03 transition-property: color;

04 transition-duration: 0.7s;

05 transition-timing-function: ease-in;

06 transition-delay: 0.3s;

07 }

08

09 a:hover {

10 color: #fff;

11 }

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

1 a {

2 color: #000;

3 transition: color 0.7s ease-in 0.3s;

4 }

5

6 a:hover {

7 color: #fff;

8 }

The W3C has a list of all Animatable Properties .

BASI C CONCEPT S OF CSS3 ANI M AT I ONS

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

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

The animation property has eight subproperties:

animation-delayDefines when the animation starts.

1.

animation-directionSets the animation to play in reverse on alternate cycles.

2.

animation-durationDefines the length of time an animation takes to complete one cycle.

3.

animation-iteration-countDefines the number of times an animation cycle should play before stopping.

4.

animation-nameSpecifies the name of the @keyframes rule.

5.

animation-play-stateDetermines whether an animation is running or paused.

6.

animation-timing-functionDescribes how an animation progresses over one cycle.

7.

animation-fill-modeSpecifies 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 /* This is the element we are applying the animation to. */

02

03 div {

04 animation-name: move;

05 animation-duration: 1s;

06 animation-timing-function: ease-in-out;

07 animation-delay: 0.5s;

08 animation-iteration-count: 2;

09 animation-direction: alternate;

10

11 -moz-animation-name: move;

12 -moz-animation-duration: 1s;

13 -moz-animation-timing-function: ease-in-out;

14 -moz-animation-delay: 0.5s;

15 -moz-animation-iteration-count: 2;

16 -moz-animation-direction: alternate;

17

18 -webkit-animation-name: move;

19 -webkit-animation-duration: 1s;

20 -webkit-animation-timing-function: ease-in-out;

21 -webkit-animation-delay: 0.5s;

22 -webkit-animation-iteration-count: 2;

23 -webkit-animation-direction: alternate;

24 }

25

26 /* This is the animation code. */

27

28 @keyframes move {

29 from {

30 transform: translateX(0);

31 }

32 to {

33 transform: translateX(100px);

34 }

35 }

36

37 @-moz-keyframes move {

38 from {

39 -moz-transform: translateX(0);

40 }

41 to {

42 -moz-transform: translateX(100px);

43 }

44 }

45

46 @-webkit-keyframes move {

47 from {

48 -webkit-transform: translateX(0);

49 }

50 to {

51 -webkit-transform: translateX(100px);

52 }

53 }

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

1 div {

2 animation: move 1s ease-in-out 0.5s 2 alternate;

3 -moz-animation: move 1s ease-in-out 0.5s 2 alternate;

4 -webkit-animation: move 1s ease-in-out 0.5s 2 alternate;

5 }

KEYF RAM ES

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

animations.

01 /* Animation from 0% to 100% */

02


04 0% { transform: translateX(0); }

05 100% { transform: translateX(100px); }

06 }

07

08 /* Animation with intermediate keyframes */

09


11 0% { transform: translateX(0); }



14 }

The W3C has a lot of useful and detailed information on CSS3 Animations.

BASI C ST RUCT URE OF OUR SL I DER

Now that we know how transitions and animation work, lets see how to create our slider usingonly 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 top propertyand changing the z-index and opacity 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 codefirst and then figure out in detail how everything works.

01

02

03

04

05

06

07

08

09 Cougar

10

11

12

13

14 Lions

15

16

17

18

19 Snowalker

20

21

22

23

24 Howling

25

26

27

28

29 Sunbathing

30

31

32

33

34

35

36

37

div id="slider"This is the main container of the slider. It does not have a particular function, butwe will need it to pause the animation.

1.

div id="mask"We will use this to hide everything that happens outside of the slider. In addition tohiding the content, the mask allows us to display the contents of the slider.

2.

li id="first" class="firstanimation"Every list item has an ID and a class. The ID displays the tooltip, and the class istied to the animation that has to occur.

3.

div class="tooltip"This simply displays the title of the image. You can modify it to your needs; forexample, by making it clickable and adding a short description.

4.

div class="progress-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 borderproperty will be useful to create a frame around the image.

01 /* SLIDER STRUCTURE */

02

03 #slider {

04 background: #000;

05 border: 5px solid #eaeaea;

06 box-shadow: 1px 1px 5px rgba(0,0,0,0.7);

07 height: 320px;

08 width: 680px;

09 margin: 40px auto 0;

10 overflow: visible;

11 position: relative;

12 }

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

1 /* HIDE ALL OUTSIDE OF THE SLIDER */

2

3 #mask {

4 overflow: hidden;

5 height: 320px;

6 }

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

01 /* IMAGE LIST */

02

03 #slider ul {

04 margin: 0;

05 padding: 0;


07 }

08

09 #slider li {

10 width: 680px; /* Width Image */

11 height: 320px; /* Height Image */

12 position: absolute;

13 top: -325px; /* Original Position - Outside of the Slider */

14 list-style: none;

15 }

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

Image animation for the slider

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

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

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

Define the total number of images to use in the slider5

1.

Define the length of animation for each image5 seconds

2.

Define the total duration of the animationMultiply the total number of images by the duration of each image:5 images 5 seconds = 25 seconds

3.

Calculate how many keyframes equals one secondDivide the total number of keyframes by the total duration of the animation.100 keyframes / 25 seconds = 4 keyframes4 keyframes = 1 second

4.

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

01 #slider li.firstanimation {

02 animation: cycle 25s linear infinite;

03 }

04

05 #slider li.secondanimation {

06 animation: cycletwo 25s linear infinite;

07 }

08

09 #slider li.thirdanimation {

10 animation: cyclethree 25s linear infinite;

11 }

12

13 #slider li.fourthanimation {

14 animation: cyclefour 25s linear infinite;

15 }

16

17 #slider li.fifthanimation {

18 animation: cyclefive 25s linear infinite;

19 }

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

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

Ive added the opacity and z-index properties to make the transition from one image to thenext more attractive.

As you can see in the code, the first animation has more keyframes than the rest. The reasonfor 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 haveadditional keyframes in order for the user not to see a break between animation cycles.

Here is all of the code for the animations:

01 /* ANIMATION */

02

03 @keyframes cycle {

04 0% { top: 0px; } /* When you start the slide, the first image is alreadyvisible */

05 4% { top: 0px; } /* Original Position */

06 16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds theimage is visible */

07 20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 secondexit image */

08 21% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position */

09 92% { top: -325px; opacity: 0; z-index: 0; }

10 96% { top: -325px; opacity: 0; } /* From 96% to 100% = for 1 second enterimage*/

11 100%{ top: 0px; opacity: 1; }

12 }

13

14 @keyframes cycletwo {

15 0% { top: -325px; opacity: 0; } /* Original Position */

16 16% { top: -325px; opacity: 0; }/* Starts moving after 16% to this position */

17 20% { top: 0px; opacity: 1; }

18 24% { top: 0px; opacity: 1; } /* From 20% to 24% = for 1 second enter image*/

19 36% { top: 0px; opacity: 1; z-index: 0; } /* From 24% to 36 % = for 3 secondsthe image is visible */

20 40% { top: 325px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 secondexit image */

21 41% { top: -325px; opacity: 0; z-index: -1; } /* Return to Original Position*/

22 100%{ top: -325px; opacity: 0; z-index: -1; }

23 }

24

25 @keyframes cyclethree {

26 0% { top: -325px; opacity: 0; }

27 36% { top: -325px; opacity: 0; }

28 40% { top: 0px; opacity: 1; }

29 44% { top: 0px; opacity: 1; }

30 56% { top: 0px; opacity: 1; }

31 60% { top: 325px; opacity: 0; z-index: 0; }

32 61% { top: -325px; opacity: 0; z-index: -1; }


34 }

35

36 @keyframes cyclefour {

37 0% { top: -325px; opacity: 0; }

38 56% { top: -325px; opacity: 0; }

39 60% { top: 0px; opacity: 1; }

40 64% { top: 0px; opacity: 1; }



43 81% { top: -325px; opacity: 0; z-index: -1; }


45 }

46 @keyframes cyclefive {

47 0% { top: -325px; opacity: 0; }

48 76% { top: -325px; opacity: 0; }

49 80% { top: 0px; opacity: 1; }

50 84% { top: 0px; opacity: 1; }


52 100%{ top: 325px; opacity: 0; z-index: 0; }

53 }

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

The progress bar for each animation

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

01 /* PROGRESS BAR */

02

03 .progress-bar {


05 top: -5px;

06 width: 680px;

07 height: 5px;

08 background: #000;

09 animation: fullexpand 25s ease-out infinite;

10 }

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

01 /* ANIMATION BAR */

02

03 @keyframes fullexpand {

04 /* In these keyframes, the progress-bar is stationary */

05 0%, 20%, 40%, 60%, 80%, 100% { width: 0%; opacity: 0; }

06

07 /* In these keyframes, the progress-bar starts to come alive */

08 4%, 24%, 44%, 64%, 84% { width: 0%; opacity: 0.3; }

09

10 /* In these keyframes, the progress-bar moves forward for 3 seconds */

11 16%, 36%, 56%, 76%, 96% { width: 100%; opacity: 0.7; }

12

13 /* In these keyframes, the progress-bar has finished his path */

14 17%, 37%, 57%, 77%, 97% { width: 100%; opacity: 0.3; }

15

16 /* In these keyframes, the progress-bar will disappear and then resume thecycle */

17 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; }

18 }

The slider is more or less complete, but lets add a few details to make it more functional. Wellinsert tooltips for the image titles that will be visible on hover.

Simple tooltip

Here is the CSS for the tooltips:

01 #slider .tooltip {

02 background: rgba(0,0,0,0.7);

03 width: 300px;

04 height: 60px;


06 bottom: 75px;

07 left: -320px;

08 }

09

10 #slider .tooltip h1 {

11 color: #fff;

12 font-size: 24px;

13 font-weight: 300;

14 line-height: 60px;

15 padding: 0 0 0 10px;

16 }

Here weve made only the image titles visible, but you can do the same to custom text, links orwhatever 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 (first, second, etc.) to have only the tooltipassociated with an image appear on hover, rather than all of the tooltips appear together.

01 #slider .tooltip {

02

03 transition: all 0.3s ease-in-out;

04 }

05

06 #slider li#first: hover .tooltip,

07 #slider li#second: hover .tooltip,

08 #slider li#third: hover .tooltip,

09 #slider li#fourth: hover .tooltip,

10 #slider li#fifth: hover .tooltip {

11 left: 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 #slider: hover li,

2 #slider: hover .progress-bar {

3 animation-play-state: 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 theiPhone 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 andfront-end developer with a passion for CSS3. He specializes in CSS andJavaScript 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 Dribbbleor add him on Google+.

The effect is impressive, but admittedly, this slider is not very versatile. For instance, to addmore images, you have to edit all of keyframes. CSS3 has great potential, but it does havelimits, 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 theimages, which allow users to interact with the slider. If you want full support amongbrowsers, this is not possible, so JavaScript is recommended. Unfortunately, CSS3 animationhas 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)

F OOT NOT ES:

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

a pure css3 cycling slideshow _ smashing coding

Documents