CSS

play

Experiments with Cascading Style Sheets

CSS3 - Auto-run Slideshows - using transitions and keyframes

14th September 2011

For Firefox v5+ Safari and Chrome ONLY - at the moment

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

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

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

copyright © stu nicholls - CSS play

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.

Although Opera supports transitions it does not yet support step().

Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

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.