I'm creating a marquee effect with CSS3 animation.
#caption {_x000D_
position: fixed;_x000D_
bottom: 0;_x000D_
left: 0;_x000D_
font-size: 20px;_x000D_
line-height: 30px;_x000D_
height:30px;_x000D_
width: 100%;_x000D_
white-space: nowrap;_x000D_
-moz-animation: caption 50s linear 0s infinite;_x000D_
-webkit-animation: caption 50s linear 0s infinite;_x000D_
}_x000D_
@-moz-keyframes caption { _x000D_
0% { margin-left:120%; } 100% { margin-left:-4200px; } _x000D_
}_x000D_
@-webkit-keyframes caption { _x000D_
0% { margin-left:120%; } 100% { margin-left:-4200px; } _x000D_
}<div id="caption">_x000D_
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._x000D_
</div>Now I can get the basic marquee effect, but the code is too specific for this demo.
Is there a way to avoid using specific values like margin-left:-4200px;, so that it can adapt text in any length?
Here is a similar demo: http://jsfiddle.net/jonathansampson/XxUXD/ that uses text-indent but still with specific values.
This question is related to
html
css
css-animations
Based on the previous reply, mainly @fcalderan, this marquee scrolls when hovered, with the advantage that the animation scrolls completely even if the text is shorter than the space within it scrolls, also any text length takes the same amount of time (this may be a pros or a cons) when not hovered the text return in the initial position.
No hardcoded value other than the scroll time, best suited for small scroll spaces
.marquee {_x000D_
width: 100%;_x000D_
margin: 0 auto;_x000D_
white-space: nowrap;_x000D_
overflow: hidden;_x000D_
box-sizing: border-box;_x000D_
display: inline-flex; _x000D_
}_x000D_
_x000D_
.marquee span {_x000D_
display: flex; _x000D_
flex-basis: 100%;_x000D_
animation: marquee-reset;_x000D_
animation-play-state: paused; _x000D_
}_x000D_
_x000D_
.marquee:hover> span {_x000D_
animation: marquee 2s linear infinite;_x000D_
animation-play-state: running;_x000D_
}_x000D_
_x000D_
@keyframes marquee {_x000D_
0% {_x000D_
transform: translate(0%, 0);_x000D_
} _x000D_
50% {_x000D_
transform: translate(-100%, 0);_x000D_
}_x000D_
50.001% {_x000D_
transform: translate(100%, 0);_x000D_
}_x000D_
100% {_x000D_
transform: translate(0%, 0);_x000D_
}_x000D_
}_x000D_
@keyframes marquee-reset {_x000D_
0% {_x000D_
transform: translate(0%, 0);_x000D_
} _x000D_
}<span class="marquee">_x000D_
<span>This is the marquee text</span>_x000D_
</span>The accepted answers animation does not work on Safari, I've updated it using translate instead of padding-left which makes for a smoother, bulletproof animation.
Also, the accepted answers demo fiddle has a lot of unnecessary styles.
So I created a simple version if you just want to cut and paste the useful code and not spend 5 mins clearing through the demo.
.marquee {_x000D_
margin: 0 auto;_x000D_
white-space: nowrap;_x000D_
overflow: hidden;_x000D_
box-sizing: border-box;_x000D_
padding: 0;_x000D_
height: 16px;_x000D_
display: block;_x000D_
}_x000D_
.marquee span {_x000D_
display: inline-block;_x000D_
text-indent: 0;_x000D_
overflow: hidden;_x000D_
-webkit-transition: 15s;_x000D_
transition: 15s;_x000D_
-webkit-animation: marquee 15s linear infinite;_x000D_
animation: marquee 15s linear infinite;_x000D_
}_x000D_
_x000D_
@keyframes marquee {_x000D_
0% { transform: translate(100%, 0); -webkit-transform: translateX(100%); }_x000D_
100% { transform: translate(-100%, 0); -webkit-transform: translateX(-100%); }_x000D_
}<p class="marquee"><span>Simple CSS Marquee - Lorem ipsum dolor amet tattooed squid microdosing taiyaki cardigan polaroid single-origin coffee iPhone. Edison bulb blue bottle neutra shabby chic. Kitsch affogato you probably haven't heard of them, keytar forage plaid occupy pitchfork. Enamel pin crucifix tilde fingerstache, lomo unicorn chartreuse plaid XOXO yr VHS shabby chic meggings pinterest kickstarter.</span></p>The following should do what you want.
@keyframes marquee {
from { text-indent: 100% }
to { text-indent: -100% }
}
Source: Stackoverflow.com