A Pure CSS3 Cycling Slideshow

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.

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;
}

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 @keyframes rule.
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.

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); }
}