Creating html5 & css3 Slideshows

Creating html5 & css3 Slideshows
with pseudo selector :nth-of-type & CSS animation property

Part 1.   Cross Fade Animation Timings and the CSS

Following continuing requests from users of the Rootsweb FreeHelp List for detail on how to implement a cross fading slideshow using the animation properties available in CSS3, I've decided to put together a short description of the animation timings implementation, as well as providing some background detail on how this works.  What follows will describe the required timings CSS of a cross fading slideshow when using images or background images.  A detailed description of how to calculate the animation-delay and animation-duration is included, though not really needed, as the Cross Fade Timings generator below will save a lot of heart-ache.

Cross Fade Timings

Number of Images
Time per Image (sec)
Cross Fade Time (sec)
Animation Name
-webkit- prefix

Click to Select - Ctrl+C, Ctrl+V to paste

As most will have a need to get the cross-fade timings right in order their slideshow can be made operational quickly, the Cross Fade Timings generator to the left will make that achievable in a few seconds.  Secondly, it saves a battle finding out the formula to use, and confusion when putting the numbers through the calculator, let alone ensuring the CSS is correctly formatted.

For simplicity, only 4 data inputs are required, i.e.

(a).. Number of Images,
(b).. Delay time for each image,
(c).. Cross-fade time between images, and
(d).. Name for the keyframes animation.

The formula used is:-

d = delay between images (s) [animation-delay]
v = full visibility (opacity:1) (s)
f = fade to transparent (opacity:0) (s)
n = number of images
p = time taken (d * n) (s) [animation-duration]

1: 0% (start)
2: (v / p) * 100 [%]
3: (d / p) * 100 [%]
4: 100 - ((f / p) * 100) [%]
5: 100% (end)

Delay 8s (5.5s visible + 2.5s xFade), Images 6, Duration 48s;
1: 0% (start)
2: 5.5 / 48 = 0.114583 x 100 = 11.4583%
3: 8 / 48 = 0.166667 x 100 = 16.6667% or 100 / 6 (images) = 16.6667%
4: -2.5 / 48 = -0.052083 x 100 = -5.2083% + 100% = 94.7916%
5: 100% (end)

@keyframes xFade {
0%{opacity:1}
11.46%{opacity:1}
16.67%{opacity:0}
94.79%{opacity:0}
100%{opacity:1} }

Just enter the required factors in the Cross Fade Timings generator, give the keyframes a name (e.g. xFade) and choose between having the -webkit- prefixed version or the standard version CSS output by checking or unchecking the checkbox.  Clicking the "Display Styles" button will provide you with the correct styles.  Copy the code by clicking in the textarea, then Ctrl+C, and paste into your text editor - Ctrl+V.

NOTE:- If you require both the -webkit- prefixed and the standard CSS, check or uncheck the checkbox and click the "Display Styles" button for each version.  The data only has to be entered once.

The output styles are also commented with the basic input data to provide easy identification when reviewing the code later.  Hopefully this Cross Fade Timings generator will enable some degree of stress relief!

This working example of a Cross Fading Slideshow includes the CSS timings as generated here.

Part 2 deals with the HTML mark-up and whether to use images or background-images, along with using the :nth-of-type pseudo element selector to target the images.

Barry Carlson - 16 December 2014