willcannings · June 28, 2017 23:14
diff --git a/css-slideshow.html b/css-slideshow.html
 <!doctype html>
 <html>
    <body>
        <!-- it's ok to keep all of this together in one block, style doesn't need to sit in <head> - just cut 'n paste to the right spot -->
        <style>
            /*
                - animation to move a slide to the left
                the animation is set to run for 18s which is long enough for 3 slides to remain on screen for 5s
                then slide left over 1s. the animation starts by waiting 5s, then transitioning the left of the
                slide out of view (direction left) over 1s, then waits for the other 2 slides to animate. near the
                end of the animation, and before the n + 2th slide (i.e 3rd slide if this is animating the 1st)
                transitions left, the slide quickly slips back into its original position (left 0px) but below the
                currently visible slide. when the animation repeats, the slide will wait for 5s again, transtion etc.
                this allows the same aniation to be used for all slides, just set the animation start delay to:
                (slide_index - 1) * 6s, i.e the 1st slide has a delay of 0s, the  3rd has a delay of 12s etc.
            */
            @keyframes slide-left-animation {
                0% {
                    /* ensure this is now the top slide */
                    z-index: 10;
                }

                /* roughly 5s */
                27% {
                    /* start at the original position (left offset 0px) */
                    left: 0px;
                    z-index: 10;
                }

                /* roughly 6s */
                33% {
                    /* end the transition with the slide at left -100% (of the width of the slideshow) */
                    left: -100%;
                    z-index: 10;
                }

                34% {
                    /* allow the next slide to become to the 'top' slide, stack this slide below it */
                    z-index: 1;
                }

                /* prepare to the move back to its original position a few s before the end of the last slide transition */
                90% {
                    /* start with current values, so the permutation on left isn't over 12s */
                    z-index: 1;
                    left: -100%;
                }

                91% {
                    z-index: 1;
                    left: 0px;
                }
            }

            .learning-header-slideshow {
                position: relative;
                overflow: hidden;
            }

            .learning-header-slideshow .slide {
                position: absolute;
                top: 0px;
                left: 0px;
                width: 100%;
                height: 100%;
                animation-name: slide-left-animation;
                animation-timing-function: ease;
                animation-duration: 18s;
                animation-fill-mode: forwards;
                animation-iteration-count: infinite;
                z-index: 1;
            }

            .learning-header-slideshow .slide-1 {
                animation-delay: 0s;
            }

            .learning-header-slideshow .slide-2 {
                animation-delay: 6s;
            }

            .learning-header-slideshow .slide-3 {
                animation-delay: 12s;
            }



            /* ------------------------------------------------------------------------ */
            /* styling for the slide content - don't copy this, it's just for this demo */
            /* ------------------------------------------------------------------------ */
            .learning-header-slideshow .slide-1 { background-color: #1b293c; }
            .learning-header-slideshow .slide-2 { background-color: #3e6a5d; }
            .learning-header-slideshow .slide-3 { background-color: #f29d31; }

            .learning-header-slideshow {
                height: 300px;
                width: 1000px;
            }

            .learning-header-slideshow .slide h1 {
                line-height: 282px;
                text-align: center;
                font-family: Avenir;
                font-size: 36;
                color: rgba(0,0,0,0.5);
            }

            .learning-header-slideshow .slide-1 h1 {
                color: rgba(255,255,255,0.5);
            }
        </style>

        <div class="learning-header-slideshow">
            <!-- important! enter the slides in reverse order so the first slide paints on top -->
            <div class="slide slide-3">
                <h1>Slide 3</h1>
            </div>
            <div class="slide slide-2">
                <h1>Slide 2</h1>
            </div>
            <div class="slide slide-1">
                <h1>Slide 1</h1>
            </div>
        </div>
    </body>
 </html>
	<!doctype html>
	<html>
	<body>
	<!-- it's ok to keep all of this together in one block, style doesn't need to sit in <head> - just cut 'n paste to the right spot -->
	<style>
	/*
	- animation to move a slide to the left
	the animation is set to run for 18s which is long enough for 3 slides to remain on screen for 5s
	then slide left over 1s. the animation starts by waiting 5s, then transitioning the left of the
	slide out of view (direction left) over 1s, then waits for the other 2 slides to animate. near the
	end of the animation, and before the n + 2th slide (i.e 3rd slide if this is animating the 1st)
	transitions left, the slide quickly slips back into its original position (left 0px) but below the
	currently visible slide. when the animation repeats, the slide will wait for 5s again, transtion etc.
	this allows the same aniation to be used for all slides, just set the animation start delay to:
	(slide_index - 1) * 6s, i.e the 1st slide has a delay of 0s, the 3rd has a delay of 12s etc.
	*/
	@keyframes slide-left-animation {
	0% {
	/* ensure this is now the top slide */
	z-index: 10;
	}

	/* roughly 5s */
	27% {
	/* start at the original position (left offset 0px) */
	left: 0px;
	z-index: 10;
	}

	/* roughly 6s */
	33% {
	/* end the transition with the slide at left -100% (of the width of the slideshow) */
	left: -100%;
	z-index: 10;
	}

	34% {
	/* allow the next slide to become to the 'top' slide, stack this slide below it */
	z-index: 1;
	}

	/* prepare to the move back to its original position a few s before the end of the last slide transition */
	90% {
	/* start with current values, so the permutation on left isn't over 12s */
	z-index: 1;
	left: -100%;
	}

	91% {
	z-index: 1;
	left: 0px;
	}
	}

	.learning-header-slideshow {
	position: relative;
	overflow: hidden;
	}

	.learning-header-slideshow .slide {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	animation-name: slide-left-animation;
	animation-timing-function: ease;
	animation-duration: 18s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	z-index: 1;
	}

	.learning-header-slideshow .slide-1 {
	animation-delay: 0s;
	}

	.learning-header-slideshow .slide-2 {
	animation-delay: 6s;
	}

	.learning-header-slideshow .slide-3 {
	animation-delay: 12s;
	}



	/* ------------------------------------------------------------------------ */
	/* styling for the slide content - don't copy this, it's just for this demo */
	/* ------------------------------------------------------------------------ */
	.learning-header-slideshow .slide-1 { background-color: #1b293c; }
	.learning-header-slideshow .slide-2 { background-color: #3e6a5d; }
	.learning-header-slideshow .slide-3 { background-color: #f29d31; }

	.learning-header-slideshow {
	height: 300px;
	width: 1000px;
	}

	.learning-header-slideshow .slide h1 {
	line-height: 282px;
	text-align: center;
	font-family: Avenir;
	font-size: 36;
	color: rgba(0,0,0,0.5);
	}

	.learning-header-slideshow .slide-1 h1 {
	color: rgba(255,255,255,0.5);
	}
	</style>

	<div class="learning-header-slideshow">
	<!-- important! enter the slides in reverse order so the first slide paints on top -->
	<div class="slide slide-3">
	<h1>Slide 3</h1>
	</div>
	<div class="slide slide-2">
	<h1>Slide 2</h1>
	</div>
	<div class="slide slide-1">
	<h1>Slide 1</h1>
	</div>
	</div>
	</body>
	</html>