尽管设置了动画填充模式，为什么我的动画会回滚到初始列表项？

Question

我遇到了一个问题，我的两个动画在动画中的最后一个项目显示后都回滚到顶部。

我有一个包含四个项目的列表，这是另一个列表中的一个项目，该列表包含这个项目和另一个项目。

像这样：

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

在嵌套列表中，我使用关键帧一次显示一项，然后向下滚动到下一项。完成后，我从未嵌套列表滚动到第二个项目以显示文本的最后一位。

我认为添加 animation-fill-mode: forwards 会使动画保持在最后一个项目上。但是我似乎没有正确使用它。

这是最终应该向用户显示的内容：

事情是1.
东西是2.
事情是 3.
事情是 4.
显示最终文本。

我添加了一个代码笔来说明我的意思：

谁能看出我错在哪里？任何帮助将不胜感激。

Answer 1

问题出在你的关键帧上！您的 sass 循环未指定 100% 值，因此一旦关键帧结束，它们就会恢复为初始值。您可以通过查看编译输出来验证这一点：

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

您可以将最终值添加到 sass 循环中，或者您可以使用几个简单的关键帧重写它们：

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

不幸的是，据我所知，这里的编辑器不支持 sass，但这里有一个显示这两个选项的代码笔：https://codepen.io/29b6/pen/abqYeJj

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