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

【问题标题】：CSS | Delay each individual animation by 2 secondsCSS |将每个单独的动画延迟 2 秒
【发布时间】：2021-07-06 18:48:45
【问题描述】：

在这个垂直幻灯片中，我希望动画在每次文字变化时暂停 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>

我该怎么办？

【问题讨论】：

将animation-duration从3s更改为10s，因为从一开始就有5个关键帧，并且在整个动画过程中时间在它们之间分配。
我试过了，谢谢，但是幻灯片的效果变得更加生涩，我不喜欢它。我希望文字变化始终保持快速，但在文字变化之前至少要经过 2 秒。谢谢

标签： html css animation css-animations

【解决方案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>

【讨论】：