Make A CSS3 Animated Image Slider

CSS3 now gives us the ability to create the same effect natively in the browser, without JavaScript or any dependence on frameworks or plugins. For the purposes of illustration Dudley Storey keeps the animation sequence fairly basic; as CSS3 Filters and variables start to be supported cross-browser, you’ll find that you will be able to add a great many more effects to this simple code. 

 

The principles of the slider are very simple: the elements on the page consist solely of a container (an HTML5 <header> element, in this case) and a “strip” of slider gallery images side-by-side. The outer container element will act as a window through which we will view each image in the strip sequence.

There are just two conditions for the elements:

• All the images must be exactly the same size
• The outer container element must be the exact same size as one of the images.