CSS3 Marquee Effect

问题:

I'm creating a marquee effect with CSS3 animation. Here are my codes.

HTML tag:

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

Now I can get the basic marquee effect, but the codes is not wise enough.

I wonder if there is a way to avoid using specific values like margin-left:-4200px;, so that it can adapt text in any length.

Also, it doesn't perform smoothly in Firefox and Safari, performs well in Chrome.

Here is a similar demo: http://jsfiddle.net/jonathansampson/XxUXD/, it uses text-indent but still with specific values.

Any advice will be appreciated.

Fred

回答1:

With a small change of the markup, here's my approach (I've just inserted a span inside the paragraph):

Example Fiddle: http://jsfiddle.net/MaY5A/1/ (borders included only for debug purpose, tested on firefox and chrome)

---

Markup

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

No hardcoded values ― dependent on paragraph width ― have been inserted

The animation applies the CSS3 transform property (use prefixes where needed) so it performs well.

If you need to insert a delay just once at the beginning then also set an animation-delay. If you need instead to insert a small delay at every loop then try to play with an higher padding-left (e.g. 150%)

回答2:

The following should do what you want.

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

回答3:

I think you should go for some javascript text slider which work fine with all the browser. I liked this one and you can do more stuffs with the same:

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

文章来源: CSS3 Marquee Effect