Hi all, just fiddling with some CSS3 for image crossfading.
I have a problem figuring out how to get this to actually scroll through the images, any help appreciated.
Here is my html code:
Code:
	<div id="body"><img src="images/testimg.jpg" alt="roof" class"="top"><img src="images/drycore_logo.png" alt="roof" class"="middle"><img src="images/testimg.jpg" alt="roof" class"="bottom"></div>
and the CSS:
Code:
#body{
padding:0;
margin:0px 165px;
	border:none;
	width:1000px;
	position:relative;
	height:1000px;
	}


#body img {
margin:45px;
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}
#body img {
  -webkit-animation-name: bodyFadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 8s;

  -moz-animation-name: bodyFadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 8s;

  -o-animation-name: bodyFadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 8s;

  animation-name: bodyFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 8s;
}
#body img:nth-of-type(1) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
#body img:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#body img:nth-of-type(3) {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
#body img:nth-of-type(4) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}
 @keyframes bodyFadeInOut {
  0% {
    opacity:1;
  }
  17% {
    opacity:1;
  }
  25% {
    opacity:0;
  }
  92% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

#body img:nth-of-type(1) {
  animation-delay: 6s;
}
#body img:nth-of-type(2) {
  animation-delay: 4s;
}
#body img:nth-of-type(3) {
  animation-delay: 2s;
}
#body img:nth-of-type(4) {
  animation-delay: 0;
}