CSS + keyframe: how to change animation speed?

Question

Here is a CodePen that uses nth-child to animate a scrolling list.

Here is the relevant CSS:

.element:nth-child(1){animation-delay:0s;opacity:0;}
.element:nth-child(2){animation-delay:5s;opacity:0;}
.element:nth-child(3){animation-delay:10s;opacity:0;}
.element:nth-child(4){animation-delay:15s;opacity:0;}
.element:nth-child(5){animation-delay:20s;opacity:0;}
.element:nth-child(6){animation-delay:25s;opacity:0;}
.element:nth-child(7){animation-delay:30s;opacity:0;}

with an animation-roll

.element{grid-column:1/-1; grid-row:1/-1; margin-right:auto; animation:roll 35s cubic-bezier(.25,.1,.25,1) 1s infinite backwards;}

As you see, the previous child is overwriting the next child. Said another way, the duration for the current child is too long and is stepped-on by the next child.

How to modify the animation so that each child is properly sequenced and no child conflicts with the next child?

Note: I have spend hours and tried many different combinations of animation-delay and animation:roll and they all fail. Something else is going on that I do not understand, so am looking for education as well as a working solution.

I have played around with it a little bit and it looks like its running every 9 seconds, rather than the 5 seconds that you have given it. If you space out the time to 9 seconds then you should be fine. — Andrew, Aug 19 '19 at 11:36
to confirm, you advise: 0 9 18 27 36 45 54. What is the time for the `animation:roll`? — Jay Gray, Aug 19 '19 at 11:51
Yeah and change this to a multiple of 9 `animation:roll 35s` which would be `animation:roll 63s` if you are using that many. Else you will need to change the `Keyframe` for roll — Andrew, Aug 19 '19 at 12:02
Related (but via jQuery) - https://stackoverflow.com/questions/20340112/ — TylerH, Aug 19 '19 at 13:40

Azametzin · Accepted Answer · 2019-08-19T13:44:12.913

The percentages in @keyframes roll overlap time of each other child. You just have to give some more time space for each one:

@keyframes roll {
    0% {
        opacity: 0;
        transform: translate3d(0, -70%, 0);
    }
    2.5%, 12.5% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
  } 17.5%, 100% {
        opacity: 0;
        transform: translate3d(0, 70%, 0);
  }
}

The total animation time is 35 seconds. Now, in @keyframes roll, each child is being shown from 0% to 17.5%. The rest of the time it's invisible. That means 6.125 seconds visible and 28.875 invisible.

You have 7 children for 35 seconds. It means about 5 seconds for each one.

ok, we've got a version working. i'll update the codepen example with the code that follow yours and accept the answer. — Jay Gray, Aug 19 '19 at 14:51

CSS + keyframe: how to change animation speed?

1 Answers1