User:Mardeg/slideshowsource.txt

Live version of the below source <!DOCTYPE html>  CSS3 Slideshow 

@-moz-keyframes image { from { opacity: 0; } 2% { opacity: 1; } 23% { opacity: 1; } 25% { opacity: 0; } to { opacity: 0; } } @-webkit-keyframes image { from { opacity: 0; } 2% { opacity: 1; } 23% { opacity: 1; } 25% { opacity: 0; } to { opacity: 0; } } @-o-keyframes image { from { opacity: 0; } 2% { opacity: 1; } 23% { opacity: 1; } 25% { opacity: 0; } to { opacity: 0; } } @-ms-keyframes image { from { opacity: 0; } 2% { opacity: 1; } 23% { opacity: 1; } 25% { opacity: 0; } to { opacity: 0; } } @keyframes image { from { opacity: 0; } 2% { opacity: 1; } 23% { opacity: 1; } 25% { opacity: 0; } to { opacity: 0; } }

@-moz-keyframes zoom { from { width: 400px; height: 600px; } 25% { width: 213px ; height: 320px; } to { width: 213px ; height: 320px; } } @-webkit-keyframes zoom { from { width: 400px; height: 600px; } 25% { width: 213px ; height: 320px; } to { width: 213px ; height: 320px; } } @-o-keyframes zoom { from { width: 400px; height: 600px; } 25% { width: 213px ; height: 320px; } to { width: 213px ; height: 320px; } } @-ms-keyframes zoom { from { width: 400px; height: 600px; } 25% { width: 213px ; height: 320px; } to { width: 213px ; height: 320px; } } @keyframes zoom { from { width: 400px; height: 600px; } 25% { width: 213px ; height: 320px; } to { width: 213px ; height: 320px; } }

@-moz-keyframes textbox { from { bottom: -3em; } 25% { bottom: -3em; } 35% { bottom: 0; } to { bottom: 0; } } @-webkit-keyframes textbox { from { bottom: -3em; } 25% { bottom: -3em; } 35% { bottom: 0; } to { bottom: 0; } } @-o-keyframes textbox { from { bottom: -3em; } 25% { bottom: -3em; } 35% { bottom: 0; } to { bottom: 0; } } @-ms-keyframes textbox { from { bottom: -3em; } 25% { bottom: -3em; } 35% { bottom: 0; } to { bottom: 0; } } @keyframes textbox { from { bottom: -3em; } 25% { bottom: -3em; } 35% { bottom: 0; } to { bottom: 0; } }

@-moz-keyframes text { from { margin-top: -3.5em; } 25% { margin-top: -7.05em; } 50% { margin-top: -11.75em; } 75% { margin-top: -15.2em; } to { margin-top: 0; } } @-webkit-keyframes text { from { margin-top: -3.5em; } 25% { margin-top: -7.05em; } 50% { margin-top: -11.75em; } 75% { margin-top: -15.2em; } to { margin-top: 0; } } @-o-keyframes text { from { margin-top: -3.5em; } 25% { margin-top: -7.05em; } 50% { margin-top: -11.75em; } 75% { margin-top: -15.2em; } to { margin-top: 0; } } @-ms-keyframes text { from { margin-top: -3.5em; } 25% { margin-top: -7.05em; } 50% { margin-top: -11.75em; } 75% { margin-top: -15.2em; } to { margin-top: 0; } } @keyframes text { from { margin-top: -3.5em; } 25% { margin-top: -7.05em; } 50% { margin-top: -11.75em; } 75% { margin-top: -15.2em; } to { margin-top: 0; } }

@-moz-keyframes loading { from { opacity: 1; } to { opacity: 0; } } @-webkit-keyframes loading { from { opacity: 1; } to { opacity: 0; } } @-o-keyframes loading { from { opacity: 1; } to { opacity: 0; } } @-ms-keyframes loading { from { opacity: 1; } to { opacity: 0; } } @keyframes loading { from { opacity: 1; } to { opacity: 0; } }

.image { position: absolute; opacity: 0; border: 0; }	top: 0; left: 0; -moz-animation: image 32s 8s infinite linear, zoom 32s 8s infinite ease-out; -webkit-animation: image 32s 8s infinite linear, zoom 32s 8s infinite ease-out; -o-animation: image 32s 8s infinite linear, zoom 32s 8s infinite ease-out; -ms-animation: image 32s 8s infinite linear, zoom 32s 8s infinite ease-out; animation: image 32s 8s infinite linear, zoom 32s 8s infinite ease-out; }	bottom: 0; left: 0; -moz-animation: image 32s 16s infinite linear, zoom 32s 16s infinite ease-out; -webkit-animation: image 32s 16s infinite linear, zoom 32s 16s infinite ease-out; -o-animation: image 32s 16s infinite linear, zoom 32s 16s infinite ease-out; -ms-animation: image 32s 16s infinite linear, zoom 32s 16s infinite ease-out; animation: image 32s 16s infinite linear, zoom 32s 16s infinite ease-out; }	bottom: 0; right: 0; -moz-animation: image 32s 24s infinite linear, zoom 32s 24s infinite ease-out; -webkit-animation: image 32s 24s infinite linear, zoom 32s 24s infinite ease-out; -o-animation: image 32s 24s infinite linear, zoom 32s 24s infinite ease-out; -ms-animation: image 32s 24s infinite linear, zoom 32s 24s infinite ease-out; animation: image 32s 24s infinite linear, zoom 32s 24s infinite ease-out; }	top: 0; right: 0; -moz-animation: image 32s 32s infinite linear, zoom 32s 32s infinite ease-out; -webkit-animation: image 32s 32s infinite linear, zoom 32s 32s infinite ease-out; -o-animation: image 32s 32s infinite linear, zoom 32s 32s infinite ease-out; -ms-animation: image 32s 32s infinite linear, zoom 32s 32s infinite ease-out; animation: image 32s 32s infinite linear, zoom 32s 32s infinite ease-out; }
 * 1) i1 {
 * 1) i2 {
 * 1) i3 {
 * 1) i4 {

-moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; -ms-animation-play-state: paused; animation-play-state: paused; }
 * 1) slideshow:hover > a > .image,#slideshow:hover > a > #info,#slideshow:hover > a > #info > p {

width: 213px; height: 320px; position: relative; overflow: hidden; margin:0 auto; -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); -o-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); -ms-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5); }
 * 1) slideshow {

height: 3em; width: 213px; position: absolute; overflow: hidden; bottom: -3em; color: white; background-color: rgba(32, 32, 32, 0.4); text-align: center; -moz-animation: textbox 4s infinite alternate; -webkit-animation: textbox 4s infinite alternate; -o-animation: textbox 4s infinite alternate; -ms-animation: textbox 4s infinite alternate; animation: textbox 4s infinite alternate; } p[role=contentinfo] { padding-top: 0.55em; font-family: Tahoma, sans-serif; font-size: 0.9em; font-weight: bold; -moz-animation: text 32s 8s steps(1, end) infinite; -webkit-animation: text 32s 8s steps(1, end) infinite; -o-animation: text 32s 8s steps(1, end) infinite; -ms-animation: text 32s 8s steps(1, end) infinite; animation: text 32s 8s steps(1, end) infinite; } span[role=progressbar] { font-family: Tahoma, sans-serif; font-size: 0.9em; font-weight: bold; -moz-animation: loading 1s 8 alternate; -webkit-animation: loading 1s 8 alternate; -o-animation: loading 1s 8 alternate; -ms-animation: loading 1s 8 alternate; animation: loading 1s 8 alternate; }	 Slideshow auto-runs continuously and pauses when hovering the images  
 * 1) info {

   Loading images...  			 Jacqueline - - HM Zwolle 2011 Reinier, Maarten - - Puur! Zwolsebosloop 2011 Hans - - Kruidenloop 2011

Arne - - Berkumloop 2011 