CSS |将每个单独的动画延迟 2 秒

Question

在这张垂直幻灯片中，我希望每次文字变化时动画暂停 2 秒。

在我的项目中，幻灯片上的文本总是不停地变化。 例如，如何将每次写入更改延迟 2 秒？我希望当文本改变时有可能阅读它。

这是我的代码：

.text-container{width: 100%;font-size: 14px;
  height: 20px;
  background:#c03022;
  color:#fff;
}

.dynamic-text{
  list-style: none;
  position: absolute;
  overflow: hidden;
  height: 20px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 100%;
}

.item{
  position: relative;
  top: 0;
  animation: move 3s infinite 2s;
  width: 100%;
  text-align:center;
}


@keyframes move{
  0%{top: 0px;}
  20%{top: -30px;}
  40%{top: -30px;}
  60%{top: -63px;}
  80%{top: -63px;}
  100%{top: -93px;}
}

<div class="text-container">
    <ul class="dynamic-text">
          <li class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
          <li class="item">&nbsp;</li>
          <li class="item">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li>
          <li class="item">&nbsp;</li>
          <li class="item">But I must explain to you how all this mistaken idea of denouncing</li>
          <li class="item">&nbsp;</li>
          <li class="item">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>
    </ul>
 </div>

我该怎么办？

Answer 1

.text-container{width: 100%;font-size: 14px;
  height: 20px;
  background:#c03022;
  color:#fff;
}

.dynamic-text{
  list-style: none;
  position: absolute;
  overflow: hidden;
  height: 20px;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 100%;
}

.item{
  position: relative;
  top: 0;
   animation: move 10s infinite;
  width: 100%;
  text-align:center;
}


@keyframes move{
     0% {
            top: 0px;
        }
        10% {
            top: 0px;
        }
        20% {
            top: -33px;
        }
        30% {
            top: -33px;
        }
        40% {
            top: -33px;
        }
        50% {
            top: -66px;
        }
        60% {
            top: -66px;
        }
        70% {
            top: -66px;
        }
        80% {
            top: -100px;
        }
        90% {
            top: -100px;
        }
        100% {
            top: -100px;
        }
}

<div class="text-container">
    <ul class="dynamic-text">
          <li class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
          <li class="item">&nbsp;</li>
          <li class="item">Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li>
          <li class="item">&nbsp;</li>
          <li class="item">But I must explain to you how all this mistaken idea of denouncing</li>
          <li class="item">&nbsp;</li>
          <li class="item">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>
    </ul>
 </div>