CSS transform not finishing - html

Question

I am making a ticker animation on my site.
This is the HTML:
<div class="top-news">
<div class="t-n-c">
<div class="textwidget">Latest News: Our first 20 customers get 20% off their first order! Order now with the coupon 20FOR20 to use this offer!
</div>
</div>
</div>
And this is the CSS:
.top-news{
color: white;
-webkit-font-smoothing: subpixel-antialiased;
font-weight: bold;
text-shadow: 0 1px 0 #ac8b00;
background-color: #f0cf31;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0cf31), to(#bd9c00));
background-image: -webkit-linear-gradient(top, #f0cf31, #bd9c00);
background-image: -moz-linear-gradient(top, #f0cf31, #bd9c00);
background-image: -ms-linear-gradient(top, #f0cf31, #bd9c00);
background-image: -o-linear-gradient(top, #f0cf31, #bd9c00);
background-image: linear-gradient(to bottom, #f0cf31, #bd9c00);
border: 1px solid #9b7a00;
-webkit-border-radius: 0.202em;
border-radius: 0.202em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0 0 0 0.327em rgba(0, 0, 0, 0.075), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px #fff153, inset 0 -1px #ac8b00;
box-shadow: 0 0 0 0.327em rgba(0, 0, 0, 0.075), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px #fff153, inset 0 -1px #ac8b00;
padding: 10px;
overflow: hidden;
white-space: nowrap;
padding-left: 100%;
}
.top-news > .t-n-c{
padding-right: 100%;
}
.top-news > .t-n-c > .textwidget{
display: inline-block;
animation-name: ticker;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 35s;
}
.top-news:hover > .t-n-c > .textwidget{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
However the result is that the text isn't going all the way to the left on my laptop. It is working fine on my iPhone, probably because the screen is smaller but if you check the live demo at: https://codepen.io/anon/pen/RRGvgG you will see that it isn't working properly on laptops.
It looks like it isn't finishing because the text finished. How can I make it so it keeps scrolling even after there is no more text?

Answer 1

It stops because it reaches 100% when all the text is shown. I changed
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
to
-webkit-transform: translate3d(-250%, 0, 0);
transform: translate3d(-250%, 0, 0);
and it works.

Answer 2

The way that translate3d works is that the percentage specified is based on the actual element's width, not the width of its container like you might expect. Therefore, if the screen is less than the width of the ticker (which is 800px, or so), it appears to be skipping back to the beginning.
You will need to increase the percentage high enough that it will always make a full rotation on all screens and slow it down. This will make the loop inaccurate, so that's something to consider. I increased the animation duration to account for the greater distance animated. See this updated codepen:
https://codepen.io/thecox/pen/pbEGVQ
.top-news > .t-n-c > .textwidget{
animation-duration: 45s;
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-300%, 0, 0);
transform: translate3d(-300%, 0, 0);
}
}