<ul id=banner>
  <li class=slide-1></li>
  <li class=slide-2></li>
  <li class=slide-3></li>
</ul>
<a href="http://twitter.com/dkarandana">@dkarandana</a>

  #banner{
    width:450px;
    height:300px;
    position:relative;
    list-style:none;
    margin:0 auto;
    padding:0;
    background: #ccc;
}
#banner li{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:300px;
    background: no-repeat scroll center center / cover;
}
#banner .slide-1{
    background-image:url(http://www.google.com/about/datacenters/gallery/images/_2000/LNR_015.jpg);
}
#banner .slide-2{
    background-image:url(http://www.google.com/about/datacenters/gallery/images/_2000/GBL_001.jpg);-webkit-animation: fadeOut 2s ease-in-out forwards;

/* css aimation  */
    opacity:0;
    animation: fadeIn 4s infinite;
    animation-delay: 0s;
}

a{
  text-align:center; 
  display:block;
}

@-webkit-keyframes fadeIn {
    100% { opacity: 1; }
}

@-moz-keyframes fadeIn {
    100% { opacity: 1; }
}

@-o-keyframes fadeIn {
    100% { opacity: 1; }
}

@keyframes fadeIn {
    100% { opacity: 1; }
}


2,960 0 0