Chaining CSS animations with infinite loop delay issue

Question

I have chained two animations in a loop. After a lot of tweaking the images scroll in and out without overlapping. The problem is once the animations have finished there is a 3-4 second delay before they restart. I have not set any delays in my code so think there's a problem with the keyframes but when I play around with the values the images start to overlap.

I have made a pen here. Only chrome keyframes at the moment, the animation staggers in codepen but displays fine in chrome :

http://codepen.io/Nullbreaker/pen/gnkbq

<div class="rightleftloop">
<img src="http://myshoedream.com/dzinehub/Shoefever/LL10173A-BLACK-4.jpg" class="imgformat1" alt="slide" />
</div>

<div class="rightleftloop2">
<img src="http://myshoedream.com/dzinehub/Shoefever/LL10173BJ-IVORY-4.jpg" class="imgformat1" alt="slide" />
</div>

.rightleftloop {
position: absolute;
-webkit-animation:rightleftloop;
-webkit-animation-duration: 8.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-fill-mode: both;
-moz-animation:rightleftloop;
-moz-animation-duration: 3.5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in 0.3s;
-moz-animation-fill-mode: both;
animation:rightleftloop;
animation-duration: 3.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in 0.3s;
animation-fill-mode: both;
}

.rightleftloop2 {
position: absolute;
-webkit-animation:rightleftloop2;
-webkit-animation-duration: 8.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-fill-mode: both;
-moz-animation:rightleftloop;
-moz-animation-duration: 3.5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in 0.3s;
-moz-animation-fill-mode: both;
animation:rightleftloop;
animation-duration: 3.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in 0.3s;
animation-fill-mode: both;
}

@-webkit-keyframes rightleftloop {
0% {right:0%;-webkit-transform: translateX(-2000px);}
10% {right:20%;}
20% {right:20%;}
30% {right:20%;-webkit-transform: translateX(-10px);}
40% {right:20%;-webkit-transform: translateX(-10px);}
60% {right:20%;-webkit-transform: translateX(-2000px);}
100% {right:100%;}
}

@-webkit-keyframes rightleftloop2 {
60% {right:0%;-webkit-transform: translateX(-2000px);}
61%  {right:20%;}
63%  {right:20%;}
64%  {right:20%;}
65% {right:20%;}
65% {right:20%;}
66% {right:20%;}
67% {right:20%;}
68% {right:20%;-webkit-transform: translateX(-2000px);}
69% {right:20%;-webkit-transform: translateX(-1000px);}
}

descene · Accepted Answer · 2014-03-09 02:44:33Z

1

Your animation keyframes were not right. I've simplified your CSS as well. You can paste this css in your pen and see the results for yourself.

body {
    background:#ffffff;
    font-family:'Economica', Arial, sans-serif;
    font-size:30px;
    font-style: normal;
    font-weight: 400;
    color:#000000;
}
/* as properties for both required images are the same, we are using them as one group */
.rightleftloop, .rightleftloop2 {
    position: absolute;
    -webkit-animation:rightleftloop;
    -webkit-animation-duration: 8.5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-fill-mode: both;
}
/* the second image animation will start with a delay of the half time as the original animation time as we set our images out of the frame from 50%-100% in the keyframes - this animation delay only comes up once before the start of the original animation */
.rightleftloop2 {
    -webkit-animation-delay: 4250ms;
}
/* one animation with pre-defined delay from 50%-100% of the time as content hidden so what ever animation we need will be done between 0%-50% */
@-webkit-keyframes rightleftloop {
    0% {
        -webkit-transform: translateX(-500px);
    }
    15% {
        -webkit-transform: translateX(20px);
    }
    35% {
        -webkit-transform: translateX(20px);
    }
    50% {
        -webkit-transform: translateX(-500px);
    }
    100% {
        -webkit-transform: translateX(-500px);
    }
}

answered Mar 9, 2014 at 2:44

descene

813 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nullbreaker Over a year ago

user3393390 Thank you very much that's awesome! Much better than my code. If I wanted to add a third or fourth image I just add a new loop with a delay? e.g. .rightleftloop3 { -webkit-animation-delay: 2125ms; }

descene Over a year ago

using CSS Animation for a slider like this isn't the way to go. you can make it much more powerful with the help of a little bit jquery.

descene Over a year ago

for 4 images you should complete the keyframes within 0-25% and keep the rest black. Then your animation time if 10s will have delays for 2nd as 2.5s, 3rd as 5s, 4th as 7.5s

Nullbreaker Over a year ago

user3393390 Thanks. Adding extra slides is just a case of doubling the delays. e.g. for three images : .rightleftloop3 { -webkit-animation-delay: 8500ms; -moz-animation-delay: 8500ms; animation-delay: 8500ms;} I want to avoid javascript and jquery. I believe a pure css slider is more flexible. I can design any block of content, have a style unique to each block and animations unique to each block. I wanted to emulate traditional flash style animations and couldn't find any existing scripts that offered the type of flexibility I was looking for.

Collectives™ on Stack Overflow

Chaining CSS animations with infinite loop delay issue

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related