Css3 custom animation for news ticker

Question

I'm new to CSS3, so please ignore it if you find this question silly.

I am working on an animation in which I have 4 list items, I need to move the list items up endlessly, and when one rotation completes, it goes back down and then the animation starts, but I need it to continue from that point.

And secondly, I need to stop the list item for 4 seconds, mainly its news ticker, so I need, like this one, I tried and developed something, but not what I want.

Here is my code:

HTML

<div class="news"> <ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> </ul> </div> 

CSS3

 @keyframes ticker { 0% { margin-top: 0 } 25% { margin-top: -30px } 50% { margin-top: -60px } 75% { margin-top: -90px } 100% { margin-top: 0 } } .news { width: 350px; height: 32px; overflow: hidden; -webkit-user-select: none; } .news ul { width: 350px; padding-left: 10px; animation: ticker 10s infinite; -webkit-user-select: none; } .news ul li { line-height: 29px; list-style: none; font-size: 10pt; } .news ul:hover { animation-play-state: paused } .news span:hover+ul { animation-play-state: paused } 

I added it to CodePen so you can get a better idea. any suggestion on this would be really helpful !!

Answer 1

I changed my way of handling animation.

Now I am animating each element separately, but reusing the same animation and setting different delays

 @keyframes ticker { 0% { transform: translateY(100%); } 5%, 25% { transform: translateY(0%); } 30%, 100% { transform: translateY(-100%); } } .news { width: 350px; height: 32px; overflow: hidden; border: solid 1px green; position: relative; } .news ul { width: 350px; padding-left: 10px; } .news li { position: absolute; top: 0px; line-height: 29px; list-style: none; font-size: 10pt; animation: ticker 8s infinite linear; } .news ul:hover { animation-play-state: paused } .news li:nth-child(4) { animation-delay: -2s; } .news li:nth-child(3) { animation-delay: -4s; } .news li:nth-child(2) { animation-delay: -6s; } 

 <div class="news"> <ul> <li>1111</li> <li>2222</li> <li>3333</li> <li>4444</li> </ul> </div>