CSS ticker not fully working

I'm trying to build a CSS ticker using some examples found on the web. I've put together something that seems to work, except it only scrolls through the first 4 list items. After the 4th item, it scrolls back to the top and starts over.

I can't figure out what makes it start over, and how to show the 5th item. I want to get it to be able to scroll through a list of possibly several hundred items.

Code....

    @keyframes ticker {
    	0%   {margin-top: 0}
    	25%  {margin-top: -30px}
    	50%  {margin-top: -60px}
    	75%  {margin-top: -90px}
    	100% {margin-top: 0}
    }
    
    .news {
      box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
      width: 300px;
      height: 30px;
      margin: 20px auto;
      overflow: hidden;
      border-radius: 4px;
      padding: 3px;
      -webkit-user-select: none
    } 
    
    .news span {
      float: left;
      color: #fff;
      padding: 6px;
      position: relative;
      top: 1%;
      border-radius: 4px;
      box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
      font: 16px 'Source Sans Pro', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -webkit-user-select: none;
      cursor: pointer
    }
    
    .news ul {
      float: left;
      padding-left: 20px;
      animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
      -webkit-user-select: none
    }
    
    .news ul li {line-height: 30px; list-style: none }
    
    .news ul li a {
      color: #fff;
      text-decoration: none;
      font: 14px Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -webkit-user-select: none
    }
    
    .news ul:hover { animation-play-state: paused }
    .news span:hover+ul { animation-play-state: paused }
    
    /* OTHER COLORS */
    .red { background: #d23435 }
    .red span { background: #c22b2c }
    
    
    <div class="news red">
    	<span>Latest News</span>
    	<ul>
    		<li><a href="#">Text 1 - Short Description</li>
    		<li><a href="#">Text 2 - Short Description</a></li>
    		<li><a href="#">Text 3 - Short Description</a></li>
    		<li><a href="#">Text 4 - Short Description</a></li>
    		<li><a href="#">Text 5 - Short Description</a></li>
    	</ul>
    </div>

Answers


100% {margin-top: 0}

That line is resetting the margin-top, so it's going back up... if you try margin-top: -120px, you can see the 5th item.

(However, having the ticker scroll through hundreds of items, with CSS, sounds terrible for UI/UX and file size... you may want JavaScript for this).


See this may help.

https://plnkr.co/edit/gbTSTc6CMuCitYCN6iSO?p=preview

As of for the animation animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;

Above code is doing the trick, First it is calling the animation (by name "ticker" which is already declared) then 10s time for animation, cubic-bezier then type and finally looping it infinite times.


Need Your Help

HTML validation error: Stray end tag head

php html5 w3c-validation

I am trying to validating my website on validator.w3.org. And I have resolved so many errors, but some errors I am not able to resolve. So please help me to resolve this one. Here is my code :

Button action or similar in NSAttributedString

ios iphone nsattributedstring nsmutableattributedstring

Is there a way to do something similar to the attribute NSLinkAttribute but instead of open an url I want trigger an action on iOS?