How can I create a marquee effect

0 votes

A marquee effect is what I'm doing with CSS3 animation.

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

I can now achieve the fundamental marquee effect, however, this demo requires too much coding specificity.

Is there a method to adjust the text of any length without requiring specific values like margin-left:-4200px;?

Aug 23 in CSS by Edureka
• 11,040 points
17 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP