CSS-animierten Lauftext mit Text-Einrückung

Question

Ich habe eine "Wichtiger Hinweis" -Bar erstellt, wo ich den Text über den Bildschirm rollen soll.

Es wird durch die Animation der text-indent erreicht, die gut zu funktionieren schien, bis ich Text hatte, der länger als die Breite des Bildschirms war.

Hier ist der 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> 

Und hier ist mein 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%; 
     } 
    } 
} 

Das Problem, das ich habe ist, dass die Länge des Textes im .sitemessage Behälter viel mehr oder viel sein könnte weniger als 100% der Bildschirmbreite, also text-indent von -100% wird nicht wirklich funktionieren.

Irgendwelche Ideen von etwas, das ich tun kann, ohne Javascript zu verwenden oder dem HTML hinzuzufügen.