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.
Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.