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.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
Expand|Select|Wrap|Line Numbers
- .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;
- }
- }