Click here to Skip to main content
15,434,147 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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
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;
        }
    }
Posted
Updated 22-Oct-14 3:39am
v2
Comments
Sergey Alexandrovich Kryukov 22-Oct-14 10:13am     CRLF
Why creating effects which will highly irritate the users anyway? —SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900