HTMLのスクロールテキストCSS

Question

thisの1つの例が見つかりました。それはうまくいきましたが、誰もスクロールをすぐに開始する方法を知っていますし、右から左にスクロールした後すぐに再び開始します。今はスクロールを開始するのに約3秒待つからです。ありがとう。以下は

はCSSです：

.example1 { 
    height: 50px;  
    overflow: hidden; 
    position: relative; 
} 

.example1 h3 { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    line-height: 50px; 
    text-align: center; 

    /* Starting position */ 
    -moz-transform:translateX(100%); 
    -webkit-transform:translateX(100%); 
    transform:translateX(100%); 

    /* Apply animation to this element */  
    -moz-animation: example1 10s linear infinite; 
    -webkit-animation: example1 10s linear infinite; 
    animation: example1 10s linear infinite; 
} 

/* Move it (define the animation) */ 
@-moz-keyframes example1 { 
    0% { -moz-transform: translateX(100%); } 
    100% { -moz-transform: translateX(-100%); } 
} 

@-webkit-keyframes example1 { 
    0% { -webkit-transform: translateX(100%); } 
    100% { -webkit-transform: translateX(-100%); } 
} 

@keyframes example1 { 
    0% { 
    -moz-transform: translateX(100%); /* Firefox bug fix */ 
    -webkit-transform: translateX(100%); /* Firefox bug fix */ 
    transform: translateX(100%);   
    } 

    100% { 
    -moz-transform: translateX(-100%); /* Firefox bug fix */ 
    -webkit-transform: translateX(-100%); /* Firefox bug fix */ 
    transform: translateX(-100%); 
    } 
} 

Answer 1

例からあなたはあなたがする必要があるすべては、次のスタイルを追加され、示されています。 .example1 h3 {display: inline-block; width: auto;}とアニメーションを約5秒間隔に変更します。

h3の幅は、中央に配置されたテキストを持つscreen/divの全幅なので、デフォルトでは遅れます。