Why are my animations rolling back to the initial list item despite setting animation-fill-mode?-CodePudding

I'm having a problem where my two animations are both rolling back to the top after the last item in the animation is shown.

I have a list of four items, which is a single item in another list that has this and one other item.

Something like this:

<ul>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li></li>
</ul>

On the nested list I'm using keyframes to show each item one at a time then scroll down to the next one. When this is done I scroll drown from the un-nested list to the second item to show the final bit of text.

I thought adding animation-fill-mode: forwards would hold the animation on the last item. But I don't seem to be using it correctly.

This is what should ultimately be displayed to the user:

Things is 1.
Things is 2.
Things is 3.
Things is 4.
Final text displayed.

I've added a codepen to show what I mean:

Codepen: https://codepen.io/TomDizzle/pen/abqYjzB?editors=1100

Can anyone see where I'm going wrong? Any help would be greatly appreciated.

CodePudding user response：

The problem is your keyframes! Your sass loops are not specifying a 100% value so they revert back to the initial value once the keyframes end. You can validate this by viewing the compiled output:

@keyframes scrollUpOuter {
  15%,
  25% {
    transform: translateY(-50%);
  }
}

You could either add the final values into your sass loop, or you could rewrite them with a few simple keyframes:

@keyframes scrollUpOuter {
  0% {
    transform:translateY(0)
  }
  100% {
    transform:translateY(-50%);
  }
}

Unfortunately the editor here doesn't support sass as far as I can tell, but here's a codepen showing both options: https://codepen.io/29b6/pen/abqYeJj