User:Mardeg/slideshowsource.txt
Live version of the below source <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS3 Slideshow</title> <style type="text/css"> @-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; } #i1 { 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; } #i2 { 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; } #i3 { 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; } #i4 { 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; } #slideshow:hover > a > .image,#slideshow:hover > a > #info,#slideshow:hover > a > #info > p { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; -ms-animation-play-state: paused; animation-play-state: paused; } #slideshow { 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); } #info { 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; } </style> </head> <body> <h3 style="text-align:center"> Slideshow auto-runs continuously<br>and pauses when hovering the images </h3><div id="slideshow"><a href="http://www.bblopers.nl/foto-album/berkumloop-2011" style="text-decoration: none;"> <img class="image" id="i1" src="https://bug693105.bugzilla.mozilla.org/attachment.cgi?id=568387" alt="Jacqueline - - HM Zwolle 2011"> <img class="image" id="i2" src="https://bug693105.bugzilla.mozilla.org/attachment.cgi?id=568388" alt="Reinier, Maarten - - Puur! Zwolsebosloop 2011"> <img class="image" id="i3" src="https://bug693105.bugzilla.mozilla.org/attachment.cgi?id=568389" alt="Hans - - Kruidenloop 2011"> <img class="image" id="i4" src="https://bug693105.bugzilla.mozilla.org/attachment.cgi?id=568391" alt="Arne - - Berkumloop 2011"> <div id="info"><p role="contentinfo"><span role="progressbar">Loading images...</span><br><br> <br>Jacqueline - - HM Zwolle 2011<br><br> <br>Reinier, Maarten - - Puur!<br>Zwolsebosloop 2011<br><br> <br>Hans - - Kruidenloop 2011<br><br> <br>Arne - - Berkumloop 2011 </div> </a></div> </body> </html>