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％，因此使用-100％的text-indent不會真正起作用。

任何想法，我可以做，而不訴諸於JavaScript或添加到HTML。