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

. 제 아이폰에서 정상적으로 작동하고 있습니다. 아마도 화면이 작기 때문일 것입니다. 그러나 라이브 데모를 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를 참조하십시오