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

[Sumaima]

down vote
favorite
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.Basica lly 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

.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;
        }
    }