CODEWITHSUNDEEP
csskeyframe
Jay Gray
Jay Gray

Reputation: 1726

CSS + keyframe: how to change animation speed?

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.

Upvotes: 4

Views: 2461

Answers (1)

Henfs
Henfs

Reputation: 5411

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.

Upvotes: 2

Related Questions