Awesome example of Keyframes animation :)

HTML :)

<div class="container">
<ul>
  <li><a href="#">
      <img src="df.png" alt="one" />
    <h5>This is heading</h5>
  </a></li>

   <li><a href="#">
      <img src="prf.jpg" alt="one" />
    <h5>This is heading</h5>
  </a></li>

   <li><a href="#">
      <img src="avtar.png" alt="one" />
    <h5>This is heading</h5>
  </a></li>

   <li><a href="#">
      <img src="avtar2.png" alt="one" />
    <h5>This is heading</h5>
  </a></li>

   <li><a href="#">
      <img src="ad2lanc.png" alt="one" />
    <h5>This is heading</h5>
  </a></li>
</ul>
</div>

CSS :)

  .container {
    width:200px;
    margin:0px auto;
    overflow:hidden;
  }
  .container ul {
    width:1000px;
    list-style:none;
    position:relative;
    -webkit-animation: slide 20s infinite;
    -moz-animation: slide 20s infinite;
    -ms-animation: slide 20s infinite;
    -o-animation: slide 20s infinite;
    animation: slide 20s infinite;
  }

  @-webkit-keyframes slide {
    10%  {
       left:0px;
    }
    15%,30% {
       left:-200px;
    }
    35%,50% {
       left:-400px;
    }
      55%,70% {
       left:-600px;
    }
      75%,90% {
       left:-800px;
    }
  }

  @-moz-keyframes slide {
    10%  {
       left:0px;
    }
    15%,30% {
       left:-200px;
    }
    35%,50% {
       left:-400px;
    }
      55%,70% {
       left:-600px;
    }
      75%,90% {
       left:-800px;
    }
  }

  @-ms-keyframes slide {
    10%  {
       left:0px;
    }
    15%,30% {
       left:-200px;
    }
    35%,50% {
       left:-400px;
    }
      55%,70% {
       left:-600px;
    }
      75%,90% {
       left:-800px;
    }
  }

  @-o-keyframes slide {
    10%  {
       left:0px;
    }
    15%,30% {
       left:-200px;
    }
    35%,50% {
       left:-400px;
    }
      55%,70% {
       left:-600px;
    }
      75%,90% {
       left:-800px;
    }
  }

  @keyframes slide {
    10%  {
       left:0px;
    }
    15%,30% {
       left:-200px;
    }
    35%,50% {
       left:-400px;
    }
      55%,70% {
       left:-600px;
    }
      75%,90% {
       left:-800px;
    }
  }

  ul,li {
    padding:0px;
    margin:0px;
  }
  .container ul li {
    float:left;
    position:relative;
  }
  .container h5 {
    background:rgba(0,0,0,0.5);
    position:absolute;
    bottom:4px;
    width:100%;
    padding:5px;
    color:#fff;
    text-align:center;
    margin-bottom:0px;
    -webkit-animation: headings 20s;
    -moz-animation: headings 20s;
    -ms-animation: headings 20s;
    -o-animation: headings 20s;
    animation: headings 20s;
  }

  @-webkit-keyframes headings {
    10%  {
       margin-bottom:4px;
    }
    15%,30% {
       margin-bottom:-200px;
    }
  }
 
  @-moz-keyframes headings {
    10%  {
       margin-bottom:4px;
    }
    15%,30% {
       margin-bottom:-200px;
    }
  }
 
  @-ms-keyframes headings {
    10%  {
       margin-bottom:4px;
    }
    15%,30% {
       margin-bottom:-200px;
    }
  }
 
  @-o-keyframes headings {
    10%  {
       margin-bottom:4px;
    }
    15%,30% {
       margin-bottom:-200px;
    }
  }
 
  @keyframes headings {
    10%  {
       margin-bottom:4px;
    }
    15%,30% {
       margin-bottom:-200px;
    }
  }

Hope you like this post :) Thanx :)