Tworzę efekt markizy z animacją CSS3. Oto moje kody.

Tag HTML:

<div id="caption">
    The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. the quick brown fox jumps over the lazy dog.
</div>

CSS:

#caption
{
    position: fixed;
    bottom: 0;
    left: 0;
    font-size: 20px;
    line-height: 30px;
    height:30px;
    width: 100%;
    white-space: nowrap;
    -moz-animation:  caption 50s linear 0s infinite;
    -webkit-animation:  caption 50s linear 0s infinite;
}
@-moz-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; }  }
@-webkit-keyframes caption { 0% { margin-left:120%; } 100% { margin-left:-4200px; }  }

Teraz mogę uzyskać podstawowy efekt markizy, ale kody nie są wystarczająco mądre.

Zastanawiam się, czy istnieje sposób na uniknięcie używania określonych wartości, takich jakmargin-left:-4200px;, dzięki czemu może dostosować tekst w dowolnej długości.

Również nie działa sprawnie w Firefox i Safari, działa dobrze w Chrome.

Oto podobne demo:http://jsfiddle.net/jonathansampson/XxUXD/, to używatext-indent ale wciąż z konkretnymi wartościami.

Wszelkie porady będą mile widziane.

Fred