Pausing item on scroll

[toolman]

Hi there,

I am looking at this news ticker. It does what I need, but I can’t work out how to have the item pause for longer on each rotation.

Could anyone help me make each item appear there for longer?

Thanks!

[PaulOB]

@toolman

Could anyone help me make each item appear there for longer?

That demo is broken anyway as it only shows 3 of the 4 items
You can make it delay by increasing the animation time from say 6s to 12s and then changing the keyframes so that nothing happens during a certain percentage.

e.g.

@keyframes ticker {
	0%  {margin-top: 0}
	10% {margin-top: -30px}
  25% {margin-top: -30px}
	35% {margin-top: -60px}
	50% {margin-top: -60px}
  60% {margin-top:-90px}
  75% {margin-top:-90px}
  85% {margin-top:-120px}
  98% {margin-top:-120px}
	100%{margin-top: 0}
}

and…

.news ul {
	float: left;
	padding-left: 100px;
  animation: ticker 12s ease infinite;
}

That will now show all 4 lines of text and pause longer between each.

You would get smoother animation if you used transform:translate rather than margin but I’ll leave you to work that out for yourself

[toolman]

Thank you