How to remove white space when scrolling text in CSS

[warrennjiru]

Hi guys

How can I remove the white space (gap) between consecutive scrolls in CSS Animation.From the demo below,the duration between the word “End” and the word “Start” is approximately 6 seconds.How can I reduce it to 1 second to create an effect of a continuous news ticker.

 

http://codepen.io/WarrenNjiru/pen/ZGPWYY

 

Thanks

[Ingolme]

At the 0% mark of the keyframes it needs to start at 1200px, not 100%. 100% is the width of the entire text, what you really want is the width of the parent element. So the code should be like this:

/* Move it (define the animation) */@-moz-keyframes scroll-left {  0% {    -moz-transform: translateX(1200px);  }  100% {    -moz-transform: translateX(-100%);  }}@-webkit-keyframes scroll-left {  0% {    -webkit-transform: translateX(1200px);  }  100% {    -webkit-transform: translateX(-100%);  }}@keyframes scroll-left {  0% {    -moz-transform: translateX(1200px);    /* Browser bug fix */        -webkit-transform: translateX(1200px);    /* Browser bug fix */        transform: translateX(1200px);  }  100% {    -moz-transform: translateX(-100%);    /* Browser bug fix */        -webkit-transform: translateX(-100%);    /* Browser bug fix */        transform: translateX(-100%);  }}

[dsonesuk]

You just need to force its starting position at right edge by maybe using left: 100%; on .scroll-left p, then start 0% with translateX(0), the only problem now is because it start at right edge -100% will end up showing the last 1200px of text, but this can be taken care of by using padding-right: 100%; which should give -100% the total width of text content + 1200px of parent container to force it left out of view of .scroll-left bordered parent container.

 

better this way, cause there is no need adjust translate to fixed pixel width each time.

 

http://codepen.io/anon/pen/eNXzGV

Edited August 8, 2015 by dsonesuk

[warrennjiru]

Many thanks Ingolme and dsonesuk for your quick response.Both methods are working perfectly.This is exactly what I wanted.

 

dsonesuk,the only thing I have noted is that your code is not working when opened with android html viewer.

 

Thanks once again

[dsonesuk]

I made mistake in webkit code should be -100% for 100% not zero, i changed it and works on android tablet.http://codepen.io/anon/pen/JdzJEa

Edited August 9, 2015 by dsonesuk

[warrennjiru]

Hi dsonesuk

 

It worked

 

Thanks