html - CSS 转换未完成

Question

我正在我的网站上制作一个自动收报机动画。

这是 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>

这是 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);
    }
}

然而，结果是文本在我的笔记本电脑上并没有一直向左移动。它在我的 iPhone 上运行良好，可能是因为屏幕较小，但如果您查看现场演示，请访问:https://codepen.io/anon/pen/RRGvgG您会发现它在笔记本电脑上无法正常工作。

看起来它没有完成，因为文本已完成。我怎样才能让它即使在没有更多文本后也能继续滚动？

Answer 1

它停止是因为当显示所有文本时达到 100%。我变了

-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);

到

-webkit-transform: translate3d(-250%, 0, 0);
transform: translate3d(-250%, 0, 0);

而且有效。