CSSPLAY

CSS DEMOS › CSS3 - Auto-run Slideshows - using transitions and keyframes

Date : 14th September 2011

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

Slideshow #1 - transitions - auto-run once when hovering the browser window

Slideshow #2 - transitions - auto-run once when hovering the images

Slideshow #3 - keyframes - auto-run continuous and pauses when hovering the images

Information

Just a very simple demonstration of the use of step() in transitions and keyframes to control the appearance of a set of images to form slideshows.

The first slideshow using step() in a transition which auto runs once only when the page is loaded and the mouse is hovered over the page. Move the mouse outside the browser window to reset the slideshow.

The second slideshow also uses step() in a transition but this time you will need to hover the image to start the slideshow. Moving the mouse off the image will reset it back to the first image.

The third slideshow uses step() in a keyframe and will auto run on page entry and continue to cycle through the images. Hover any image to pause the slideshow, and move the mouse off the image to resume the slideshow.

The code and stylesheet for each slideshow is very simple and show the power of CSS3 transitions and keyframes.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.