Efeito Marquee CSS3

Estou criando um efeito de letreiro com animação CSS3. Aqui estão meus códigos.

Tag HTML:

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.

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; } } 

Agora eu posso obter o efeito básico da marquise, mas os códigos não são sábios o suficiente.

Gostaria de saber se existe uma maneira de evitar o uso de valores específicos, como margin-left:-4200px; , para que possa adaptar o texto em qualquer tamanho.

Além disso, ele não apresenta um bom desempenho no Firefox e no Safari e funciona bem no Chrome.

Aqui está uma demonstração similar: http://jsfiddle.net/jonathansampson/XxUXD/ , ele usa text-indent mas ainda com valores específicos.

Qualquer conselho será apreciado.

Fred

Com uma pequena alteração da marcação, aqui está minha abordagem (acabei de inserir um span dentro do parágrafo):

Exemplo Fiddle: http://jsfiddle.net/MaY5A/1/ (bordas incluídas apenas para fins de debugging, testadas no firefox e chrome)


Marcação

 

Windows 8 and ...

CSS

 .marquee { width: 450px; margin: 0 auto; white-space: nowrap; overflow: hidden; box-sizing: border-box; } .marquee span { display: inline-block; padding-left: 100%; /* show the marquee just outside the paragraph */ animation: marquee 15s linear infinite; } .marquee span:hover { animation-play-state: paused } /* Make it move */ @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } } 

Nenhum valor codificado – dependente da largura do parágrafo – foi inserido

A animação aplica a propriedade de transform CSS3 (use os prefixos onde necessário) para que ela tenha um bom desempenho.

Se você precisar inserir um atraso apenas uma vez no início, defina também um animation-delay . Se você precisar inserir um pequeno atraso em cada loop, tente jogar com um padding-left maior padding-left (por exemplo, 150% )

O seguinte deve fazer o que quiser.

 @keyframes marquee { from { text-indent: 100% } to { text-indent: -100% } } 

Eu queria colocar um comentário abaixo da resposta de fcalderan, mas ainda não tenho 50 representantes. Desculpa.

Eu tentei sua resposta e funcionou, mais ou menos. Se você está experimentando um comportamento estranho como:

  • O texto diminui quando totalmente visualizado (mesmo com linear )
  • Ao usar text-indent: -100% o texto pára em ~ 50%

Você pode ter a tag css: text-align: center on. Isso faz com que coisas estranhas aconteçam. Só queria adicioná-lo aqui no caso de alguém ter problemas como eu tive.

Eu acho que você deve ir para algum slider de texto javascript que funciona bem com todo o navegador. Eu gostei deste e você pode fazer mais coisas com o mesmo:

http://jscroller2.markusbordihn.de/example/endless/