Animate the headings of a slider in a loop at the same time.

[sami sam]

Animate the headings of a slider in a loop at the same time.
Hi All,
I want to animate 3 headings at the same time with some delay but I am having problem to doing this.For now only one heading is animate and remaining are on their position.Basically these are the sliders headings and animate in a loop.
Heading-1 = image-1 heading
Heading-2 = image-2 heading
Heading-3 = image-3 heading
All these headings are displaying at the top and when user clicks on the arrow to slide the next image Heading-2 animate and slide on Heading-1 position and Heading-3 animate and slides on Heading-2 position and Heading-1 slides to Heading-3 position.Below is my CSS code. Thanks

<div style="width: 1330px; height: 390px;">
   <div>
      <ul id="slider" class=" horizontal" style="width: 6650px; left: -2660px;">
         <li class="panel4 cloned panel" style="width: 1330px; height: 390px;"><iframe src="http://player.vimeo.com/video/18011143?title=0&amp;byline=0&amp;portrait=0" width="800" height="225" frameborder="0" style="width: 100%; height: 100%;"></iframe></li>
         <li class="panel4 panel" style="width: 1330px; height: 390px;"><img src="images/banner.png" style="width: 100%; height: 100%;"></li>
         <li class="panel4 panel activePage" style="width: 1330px; height: 390px;"><img src="images/banner.png" style="width: 100%; height: 100%;"></li>
         <li class="panel4 panel" style="width: 1330px; height: 390px;"><iframe src="http://player.vimeo.com/video/18011143?title=0&amp;byline=0&amp;portrait=0&amp;wmode=opaque&amp;api=1&amp;player_id=asvideo0" width="800" height="225" frameborder="0" id="asvideo0" style="width: 100%; height: 100%;"></iframe></li>
         <li class="panel4 cloned panel" style="width: 1330px; height: 390px;"><img src="images/banner.png" style="width: 100%; height: 100%;"></li>
      </ul>
   </div>
   <div class="controls" style="display: block;">
      <ul class="thumbNav">
         <li class="first"><a class="panel1" href="#"><span><small>2014</small>Title 1</span></a></li>
         <li><a class="panel2 cur" href="#"><span><small>2014</small>Title 2</span></a></li>
         <li class="last"><a class="panel3" href="#"><span><small>2014</small>Title 3</span></a></li>
      </ul>
      <a href="#" class="start-stop" style="display: inline;"><span>Start</span></a>
   </div>
   <span class="arrow back"><a href="#"><span>«</span></a></span><span class="arrow forward"><a href="#"><span>»</span></a></span>
</div>

CSS:

.thumbNav li:nth-of-type(1) a.cur
    {
        animation: mymovea 5s forwards;
        position: relative;
        webkit-animation: mymovea 5s forwards;
    }
    @-webkit-keyframes mymovea
    {
        0%
        {
            top: 0px;
        }
        25%
        {
            top: 200px;
        }
        75%
        {
            top: 50px;
        }
        100%
        {
            top: 220px;
        }
    }
    @keyframes mymovea
    {
        0%
        {
            top: 0px;
        }
        25%
        {
            top: 200px;
        }
        75%
        {
            top: 50px;
        }
        100%
        {
            top: 220px;
        }
    }
    .thumbNav li:nth-of-type(2) a.cur
    {
        animation: mymoveb 5s forwards;
        position: relative;
        webkit-animation: mymoveb 5s forwards;
    }
    @-webkit-keyframes mymoveb
    {
        0%
        {
            top: 0px;
        }
        25%
        {
            top: 200px;
        }
        75%
        {
            top: 50px;
        }
        100%
        {
            top: 150px;
        }
    }
    @keyframes mymoveb
    {
        0%
        {
            top: 0px;
        }
        25%
        {
            top: 200px;
        }
        75%
        {
            top: 50px;
        }
        100%
        {
            top: 150px;
        }
    }
    .thumbNav li:nth-of-type(3) a.cur
    {
        animation: mymovec 5s forwards;
        position: relative;
        webkit-animation: mymovec 5s forwards;
    }
    @-webkit-keyframes mymovec
    {
        0%
        {
            top: 0px;
        }
        25%
        {
            top: 200px;
        }
        75%
        {
            top: 50px;
        }
        100%
        {
            top: 60px;
        }
    }
    @keyframes mymovec
    {
        0%
        {
            top: 0px;
        }
        25%
        {
            top: 200px;
        }
        75%
        {
            top: 50px;
        }
        100%
        {
            top: 60px;
        }
    }