时间戳

首页 > 解决方案 > 显示新的css动画线性停止2s

  • jquery - 显示新的css动画线性停止2s

  • 问题描述

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

    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>

    标签： jquerycssanimationcss-animations

    解决方案

    尝试复制状态。

      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，以便我们可以更好地对其进行可视化并轻松输入数字。用excel轻松计算

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

    推荐阅读