CSSは、テキストインデントを使用してスクロールテキストをアニメーション化します

Question

テキストを画面上でスクロールさせるために、「重要な注意」バーを作成しました。

text-indentは、画面の幅よりも長いテキストが表示されるまでうまくいくように見えます。ここで

はHTMLです：

<div class="sitemessage"> 
    dfgh hgsl;k sfghjh fgdlj dflgh sg jls sdfhsdkjldfjksg sdfg ksjdfhg klsjdfhg lksjdfhg klsjdhg lksjdhfg sldkfjgh sdflgkjsdfglk jsdfg klsdfgl jksdfgl jksdfg ljsdfgkjl dafglkj adfgkl sdfgkjh sdfgkhl sdfg kjlsdfgk lsdfgk jl sdfgkl adfgkl adfgklj sdfgklhj sdfgkl jdfg kljafdg ljkdfg klsdfgkhjl sdfgk jlsdfgkhj dfgkhl adfgkj adfkljg a 
</div> 

そして、ここに私のCSSです：

.sitemessage { 
    width:100%; 
    max-width: 960px; 
    margin:auto; 
    white-space: nowrap; 
    overflow: hidden; 
    text-indent: 965px; 
    animation: floatText 15s infinite linear; 
} 

.sitemessage:hover { 
    -webkit-animation-play-state: paused; 
    -moz-animation-play-state: paused; 
    -o-animation-play-state: paused; 
    animation-play-state: paused; 
} 

@-webkit-keyframes floatText{ 
    from { 
     text-indent: 100%; 
    } 

    to { 
     text-indent: -100%; 
    } 
} 

@media screen and (min-width: 960px) { 
    @-webkit-keyframes floatText{ 
     from { 
      text-indent: 960px; 
     } 

     to { 
      text-indent: -100%; 
     } 
    } 
} 

私が持っている問題は、.sitemessageコンテナ内のテキストの長さが、より多くのまたは多くなり得ることですスクリーン幅の100％未満なので、text-indentを-100％使用すると実際には機能しません。

私はJavascriptに頼らずに、あるいはHTMLに追加することなく、何かできることがあれば何でも構いません。