滚动文本闪烁

Question

我想从右向左滚动文本，我正在使用css，但文本闪烁。有没有其他的方式来做同样的事情，以便文本不会闪烁？请帮忙。

HTML是

 <div class="scroll-left"> 
     <p>CSS scrolling text... </p> 
    </div> 

CSS是

.scroll-left{ 
margin-top: -130px; 
font-size: 140px; 
color: rgb(255, 255, 255); 
} 
.scroll-left p { 
-moz-backface-visibility: hidden; 
-ms-backface-visibility:  hidden; 
-webkit-backface-visibility: hidden; 
/* Starting position */ 
-moz-transform:translateX(100%); 
-webkit-transform:translateX(100%);  
transform:translateX(100%); 
/* Apply animation to this element */ 
-moz-animation: scroll-left 10s linear infinite; 
-webkit-animation: scroll-left 10s linear infinite; 
animation: scroll-left 10s linear infinite; 
} 
/* Move it (define the animation) */ 
@-moz-keyframes scroll-left { 
    0% { -moz-transform: translateX(100%); } 
    100% { -moz-transform: translateX(-100%); } 
    } 
@-webkit-keyframes scroll-left { 
    0% { -webkit-transform: translateX(100%); } 
    100% { -webkit-transform: translateX(-100%); } 
} 
@keyframes scroll-left { 
    0% { 
    -moz-transform: translateX(100%); /* Browser bug fix */ 
    -webkit-transform: translateX(100%); /* Browser bug fix */ 
    transform: translateX(100%);   
    } 
    100% { 
    -moz-transform: translateX(-100%); /* Browser bug fix */ 
    -webkit-transform: translateX(-100%); /* Browser bug fix */ 
    transform: translateX(-100%); 
    } 
} 

Answer 1

我测试了不同的电脑上相同的代码，它工作正常。所以我认为它的屏幕分辨率问题