Fade-In and Fade-Out Images automatically using CSS3

In this tutorial you can see this code is very useful for fade-in and fade-out  two images after 9 sec.

you can use it and enjoy the html pages very lightly.

1. Put two images within you image folder

2. Change this image src in this code as per your src
3. run your index.html


Index.html

  <style>
  @-webkit-keyframes rituFadeInOut {
   0% {
     opacity:1;
   }
   25% {
    opacity:1;
  }
  75% {
    opacity:0;
  }
  100% {
   opacity:0;
 }
}

@-moz-keyframes rituFadeInOut {
 0% {
   opacity:1;
 }
 25% {
  opacity:1;
}
75% {
  opacity:0;
}
100% {
 opacity:0;
}
}

@-o-keyframes rituFadeInOut {
 0% {
   opacity:1;
 }
 25% {
  opacity:1;
}
75% {
  opacity:0;
}
100% {
 opacity:0;
}
}

@keyframes rituFadeInOut {
 0% {
   opacity:1;
 }
 25% {
  opacity:1;
}
75% {
  opacity:0;
}
100% {
 opacity:0;
}
}

#ritu {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}
#ritu img {
  position:absolute;
  left:0;
}

#ritu img.top {
  -webkit-animation-name: rituFadeInOut;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 10s;
  -webkit-animation-direction: alternate;

  -moz-animation-name: rituFadeInOut;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 10s;
  -moz-animation-direction: alternate;

  -o-animation-name: rituFadeInOut;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 10s;
  -o-animation-direction: alternate;

  animation-name: cf3FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 10s;
  animation-direction: alternate;
}

</style>
<div id="ritu" class="shadow">
  <img class="bottom" src="image/ritu.jpg">
  <img class="top" src="image/ritu1.jpg">
</div>