warrennjiru Posted August 8, 2015 Share Posted August 8, 2015 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 Link to comment Share on other sites More sharing options...
Ingolme Posted August 8, 2015 Share Posted August 8, 2015 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%); }} Link to comment Share on other sites More sharing options...
dsonesuk Posted August 8, 2015 Share Posted August 8, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
warrennjiru Posted August 9, 2015 Author Share Posted August 9, 2015 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted August 9, 2015 Share Posted August 9, 2015 (edited) 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 Link to comment Share on other sites More sharing options...
warrennjiru Posted August 18, 2015 Author Share Posted August 18, 2015 Hi dsonesuk It worked Thanks Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now