Как я могу добавить задержку между предметами вертикального тикера новостей, сделанных с CSS KeyFrames? ⇐ Html

[Anonymous]

Я работаю над вертикальным тикером новостей, используя только CSS.

Код: Выделить всё

@-webkit-keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}

100% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}

@keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
visibility: visible;
}

100% {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
}

.news-ticker {
margin: 0 auto;
border-radius: 4px;
padding: 15px;
background: #CFE2FF;
}

.news-wrapper {
overflow: hidden;
padding-left: 30px;
background: transparent url('https://i.sstatic.net/LhFKIAAd.png') no-repeat left center;
}

.news-ticker ul {
display: flex;
flex-direction: column;
height: 25px;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;

}

.news-ticker li {
color: #0043a7;
white-space: nowrap;
flex: 1;
width: 100%;
}< /code>
[*]



[list]
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
[*]Molestias beatae recusandae ipsam animi non numquam itaque veritatis quaerat totam eligendi.
[*]Lorem ipsum dolor sit amet consectetur, adipisicing elit aperiam, distinctio.
[/list]

Проблема с вышеуказанным кодом состоит в том, что элементы новостей показаны в виде в a без интервала (задержка) между ними.
Как я могу добавить задержку (в секунды)?

Подробнее здесь: https://stackoverflow.com/questions/795 ... e-with-css