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(-250%, 0, 0); 
transform: translate3d(-250%, 0, 0); 

に

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

を変更し、それが動作します。

Answer 2

translate3dの仕組みは、指定したパーセンテージが実際の要素の幅に基づいており、予想通りにコンテナの幅に基づいているわけではありません。したがって、画面がティッカーの幅（800pxなど）よりも小さい場合は、最初にスキップしているように見えます。

すべての画面で常にフル回転し、速度を遅くするのに十分な割合を増やす必要があります。これはループを不正確にするので、考慮すべき点です。私はアニメーションの長さをアニメーション化された距離を増やすために増やしました。

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

：この更新codepenを参照してください。