Skip to content

Instantly share code, notes, and snippets.

@toburger
Created May 17, 2013 08:18
Show Gist options
  • Save toburger/5597704 to your computer and use it in GitHub Desktop.
Save toburger/5597704 to your computer and use it in GitHub Desktop.
nice background slideshow with CSS3 transitions
/**
* nice background slideshow with CSS3 transitions
* adapted from: http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
html, body {
margin: 0;
padding: 0;
}
.cb-slideshow, .cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
/*background: transparent url('http://pehaa.com/wp-content/uploads/2009/03/pattern1.png') repeat top left;*/
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 0;
z-index: 0;
backface-visibility: hidden;
animation: imageAnimation 12s linear infinite 0s;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(http://themeserver.microsoft.com/themeserver//Bing/Desktop/en-US/Images/BaliBoats1920x120011-8-2012%209_23_02%20AM.jpg);
}
.cb-slideshow li:nth-child(2) span {
background-image: url(http://themeserver.microsoft.com/themeserver//Bing/Desktop/en-US/Images/DewDragon1920x120011-8-2012%209_23_11%20AM.jpg);
animation-delay: 3s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(http://themeserver.microsoft.com/themeserver//Bing/Desktop/en-US/Images/CapeMay1920x120011-1-2012%2012_19_11%20PM.jpg);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(http://themeserver.microsoft.com/themeserver//Bing/Desktop/en-US/Images/HolkhamBay1920x120011-1-2012%2012_19_34%20PM.jpg);
animation-delay: 9s;
}
@keyframes imageAnimation {
0% {
opacity: 1;
transform: translateX(100%);
}
5% {
opacity: 1;
transform: translateX(0px);
}
25% {
opacity: 1;
transform: translateX(0px);
}
30% {
opacity: 1;
transform: translateX(-100%);
}
31% {
opacity: 0;
}
}
/* Show at least something wsupported */
.no-cssanimations .cb-slideshow li span {
opacity: 1;
}
<ul class="cb-slideshow">
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
// alert('Hello world!');
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment