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.
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.
We can use four transition properties:
Let’s see how to apply a simple transition to a link:
When assigning an animation to an element, you can also use the shorthand:
The W3C has a list of all “Animatable Properties.”
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:
But we can use the shorthand property to conveniently set all of the animation properties at once.
The W3C has a lot of useful and detailed information on “CSS3 Animations.”
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
Let’s dive right into the HTML markup to create the slider.
The
Finally, to sort the list of images, we’ll have
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, 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:
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
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:
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:
Don’t be afraid of the syntax here. It has the same function as
Simple tooltip
Here is the CSS for the tooltips:
Here we’ve 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 let’s do it to the tooltips.
If you remember, we added an ID to each list (
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.)
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.
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!
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.
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.
Let’s 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 | } |
1 | a { |
2 | color: #000; |
3 | transition: color 0.7s ease-in 0.3s; |
4 | } |
5 |
6 | a:hover { |
7 | color: #fff; |
8 | } |
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:
animation-delay
Defines when the animation starts.animation-direction
Sets the animation to play in reverse on alternate cycles.animation-duration
Defines the length of time an animation takes to complete one cycle.animation-iteration-count
Defines the number of times an animation cycle should play before stopping.animation-name
Specifies the name of the@keyframesrule.animation-play-state
Determines whether an animation is running or paused.animation-timing-function
Describes how an animation progresses over one cycle.animation-fill-mode
Specifies how a CSS animation should apply styles to its target before and after executing.
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 | } |
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 | } |
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 | /* Animation from 0% to 100% */ |
02 |
03 | @keyframes move { |
04 | 0% { transform: translateX(0); } |
05 | 100% { transform: translateX(100px); } |
06 | } |
07 |
08 | /* Animation with intermediate keyframes */ |
09 |
10 | @keyframes move { |
11 | 0% { transform: translateX(0); } |
12 | 50% { transform: translateX(20px); } |
13 | 100% { transform: translateX(100px); } |
14 | } |
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: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.01 | <div class="container"> |
02 | <div id="content-slider"> |
03 | <div id="slider"> <!-- Slider container --> |
04 | <div id="mask"> <!-- Mask --> |
05 |
06 | <ul> |
07 | <li id="first" class="firstanimation"> <!-- ID for tooltip and class for animation --> |
08 | <a href="#"> <img src="images/img_1.jpg" alt="Cougar"/> </a> |
09 | <div class="tooltip"> <h1>Cougar</h1> </div> |
10 | </li> |
11 |
12 | <li id="second" class="secondanimation"> |
13 | <a href="#"> <img src="images/img_2.jpg" alt="Lions"/> </a> |
14 | <div class="tooltip"> <h1>Lions</h1> </div> |
15 | </li> |
16 |
17 | <li id="third" class="thirdanimation"> |
18 | <a href="#"> <img src="images/img_3.jpg" alt="Snowalker"/> </a> |
19 | <div class="tooltip"> <h1>Snowalker</h1> </div> |
20 | </li> |
21 |
22 | <li id="fourth" class="fourthanimation"> |
23 | <a href="#"> <img src="images/img_4.jpg" alt="Howling"/> </a> |
24 | <div class="tooltip"> <h1>Howling</h1> </div> |
25 | </li> |
26 |
27 | <li id="fifth" class="fifthanimation"> |
28 | <a href="#"> <img src="images/img_5.jpg" alt="Sunbathing"/> </a> |
29 | <div class="tooltip"> <h1>Sunbathing</h1> </div> |
30 | </li> |
31 | </ul> |
32 |
33 | </div> <!-- End Mask --> |
34 | <div class="progress-bar"></div> <!-- Progress Bar --> |
35 | </div> <!-- End Slider Container --> |
36 | </div> |
37 | </div> |
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.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.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.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.div class="progress-bar"
This contains the function that shows the progress of the animation.
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.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 | } |
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 | /* HIDE ALL OUTSIDE OF THE SLIDER */ |
2 |
3 | #mask { |
4 | overflow: hidden; |
5 | height: 320px; |
6 | } |
position: absolute and top: -325px so that all of the images are positioned outside of the slider.01 | /* IMAGE LIST */ |
02 |
03 | #slider ul { |
04 | margin: 0; |
05 | padding: 0; |
06 | position: relative; |
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 | } |
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
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 | } |
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:
01 | /* ANIMATION */ |
02 |
03 | @keyframes cycle { |
04 | 0% { top: 0px; } /* When you start the slide, the first image is already visible */ |
05 | 4% { top: 0px; } /* Original Position */ |
06 | 16% { top: 0px; opacity:1; z-index:0; } /* From 4% to 16 % = for 3 seconds the image is visible */ |
07 | 20% { top: 325px; opacity: 0; z-index: 0; } /* From 16% to 20% = for 1 second exit 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 enter image*/ |
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 seconds the image is visible */ |
20 | 40% { top: 325px; opacity: 0; z-index: 0; } /* From 36% to 40% = for 1 second exit 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; } |
33 | 100%{ 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; } |
41 | 76% { top: 0px; opacity: 1; z-index: 0; } |
42 | 80% { top: 325px; opacity: 0; z-index: 0; } |
43 | 81% { top: -325px; opacity: 0; z-index: -1; } |
44 | 100%{ 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; } |
51 | 96% { top: 0px; opacity: 1; z-index: 0; } |
52 | 100%{ top: 325px; opacity: 0; z-index: 0; } |
53 | } |
5. Progress Bar
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 | .progress-bar { |
04 | position: relative; |
05 | top: -5px; |
06 | width: 680px; |
07 | height: 5px; |
08 | background: #000; |
09 | animation: fullexpand 25s ease-out infinite; |
10 | } |
from to; you can see that the keyframes 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 the cycle */ |
17 | 18%, 38%, 58%, 78%, 98% { width: 100%; opacity: 0; } |
18 | } |
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
Here is the CSS for the tooltips:
01 | #slider .tooltip { |
02 | background: rgba(0,0,0,0.7); |
03 | width: 300px; |
04 | height: 60px; |
05 | position: relative; |
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 | } |
7. CSS3 Transitions
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.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 | } |
8. Pause And Restart
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.)
1 | #slider: hover li, |
2 | #slider: hover .progress-bar { |
3 | animation-play-state: paused; |
4 | } |
9. Demo
Finally, we’ve 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.
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!
OK, I see what they are doing. The issue is those methods in all internet explorer from what I can see (doesn't perform in any edition of IE or Opera). IE still records for over 46% of web customers so 46% of web customers would not be able to see your CSS slide show.
ReplyDeleteOK, Have you ever heard about CSS3PIE http://css3pie.com/ . If not try that one for your IE CSS3 rendering.
Delete