CSS | Delay each individual animation by 2 seconds

user_12963227 0
Viewed 289

In this vertical slide I would like the animation to pause for 2 seconds every time the writing changes.

In my project, the text always changes on the slide without stopping. How can I delay each change of writing for 2 seconds for example? I wish that when the text changes there is the possibility to read it.

This is my code:

.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>

How can i do?

css-animations animation css html
1 Answers

.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>

user_160528450
Related