显示新的<li>时css动画线性停止2s答案

【问题标题】：css animation linear stop for 2s when display new <li>显示新的<li>时css动画线性停止2s
【发布时间】：2020-10-07 17:10:12
【问题描述】：

当它显示

内容时，现在的代码正在不停地向上移动。如何在关键帧之间暂停？

li {
  line-height: 50px;
}

#list-container {
  animation: li_move forwards 10s linear 1s infinite;
}

@keyframes li_move {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(calc((100% - 50px)*-1));
  }
}

<div id="list-container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

【问题讨论】：

您的动画不工作。请给我们正确的代码或解释问题。

标签： jquery css animation css-animations

【解决方案1】：

尝试复制状态。

  11.8% {transform: translateY(-50px);}
  17.7% {transform: translateY(-50px);}

假设我们按照要求将动画停止 2 秒，并在其间设置 1 秒的动画。我们有 5 个动画 * 3 =（总共 15 个）+ 2 秒。

animation: li_move forwards 17s ease-out

1s 的动画是 100%/17 = 5.9%。每5.9%的动画，动画将持续1秒。我们可以制作一个 excel spreahseet，以便我们可以更好地对其进行可视化并轻松输入数字。

li {
  line-height: 50px;
}

#list-container {
  animation: li_move forwards 17s ease-out 
  1s infinite;
}

@keyframes li_move {
  0% {transform: translateY(0);}
  11.8% {transform: translateY(-50px);}
  17.7% {transform: translateY(-50px);}
  29.5% {transform: translateY(-100px);}
  35.4% {transform: translateY(-100px);}
  47.2% {transform: translateY(-150px);}
  53.1% {transform: translateY(-150px);}
  64.9% {transform: translateY(-200px);}
  70.8% {transform: translateY(-200px);}
  82.5% {transform: translateY(-250px);}
  88.5% {transform: translateY(-250px);}
  88.500001% {transform: translateY(0);}
}

<div id="list-container">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

可选：您还可以通过将鼠标悬停在 div 上来暂停动画：

#list-container:hover {
  animation-play-state: paused;
}

【讨论】：

当它到达 6 并且动画到 1 时，可以让 1 暂停吗？在 6 之后，当它达到 1 时，它会立即动画到 2
我向您展示了我是如何计算动画停止的数字的。我添加了一个额外的跳转 88.500001% {transform: translateY(0);} 它只是跳过帧，所以它不会动画到开始。在重新开始循环之前等待 2 秒的动画。