显示新<li>时css动画线性停止2秒

Question

现在的代码在显示内容时没有停顿地向上移动。如何在关键帧之间暂停？

​

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>

​

Answer 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;
}