css3 custom animation for news ticker

Question

I am new to CSS3, so please ignore if you find this question silly.

I am working on animation, in which I have 4 list items, I need to move these list items upwards infinite times, and when one rotation completes, It goes back downwards and then starts animation but I need it continue from that point.

And second thing is I need to stop list item for 4 seconds, basically its a news ticker so i need like this one, I have tried and develop 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 have added it to the CodePen so that you can have better idea. any suggestion in this will be really helpful !!

Answer 1

I have changed your way to handle the 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>