CINXE.COM
CSS Marquees
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="CSS marquees, marquee, scroll, scrolling, news ticker, text, image, codes, free css code, copy, paste"> <meta name="Description" content="Create a CSS marquee using CSS animations. Scrolling text, images, slide-in text, up, down. Standards compliant code."> <link rel="canonical" href="https://www.quackit.com/css/codes/marquees/"> <title>CSS Marquees</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">CSS Marquees</h1> <div class="ad ad-top"> <!-- GAM 71161633/QCKIT_quackit/category_header --> <div data-fuse="23059883638"></div> </div> <p>CSS marquees are replacing <a href="/html/codes/html_marquee_code.cfm">HTML marquees</a> as the standard method for creating scrolling, bouncing, or slide-in text and images.</p> <p>CSS marquees can be created with CSS animations, which make them standards-compliant. The old HTML method of using the <code><marquee></code> element is not standards-compliant, as the element is not part of the W3C HTML specifications.</p> <p>To create a CSS marquee, we can use the <a href="/css/css3/properties/css_animation.cfm"><code>animation</code></a> property along with the <a href="/css/css3/properties/css_@keyframes.cfm"><code>@keyframes</code></a> rule to create the animation. </p> <p>The examples on this page use <a href="/css/functions/css_translatex_function.cfm"><code>translateX()</code></a> and <a href="/css/functions/css_translatey_function.cfm"><code>translateY()</code></a> to specify the path of the scrolling elements. You can also <a href="/css/codes/marquees/create_css_marquee_using_margins.cfm">create a css marquee using margins</a>.</p> <h2>Scrolling Text</h2> <p>Here we use <a href="/css/functions/css_translatex_function.cfm"><code>translateX()</code></a> to determine the placement of the text at the start and finish of the animation. It then moves between these two points as the animation progresses.</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>

<!-- Styles -->	
<style>
.example1 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example1 h3 {
 font-size: 3em;
 color: limegreen;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: example1 15s linear infinite;
 -webkit-animation: example1 15s linear infinite;
 animation: example1 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example1 {
 0% { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes example1 {
 0% { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes example1 {
 0% { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}
</style>

<!-- HTML -->	
<div class="example1">
<h3>Scrolling text... </h3>
</div></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/codes/marquees/scrolling_text" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Slide-In Text</h2> <p>You can create slide-in text by removing <code>infinite</code> and setting the end <a href="/css/functions/css_translatex_function.cfm"><code>translateX()</code></a> values to zero or a positive value. Here, we also make the text slow down gradually before it stops. We do this changing <code>linear</code> to <code>ease-out</code>. You may need to refresh this page to see the slide-in effect (or see <a href="/css/codes/marquees/create_fly-in_text_in_css.cfm">Fly-In Text</a>).</p> <script src="/common/js/codemirror/mode/text/css/text/css.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>

<!-- Styles -->	
<style>
.example4 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example4 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: left;

 /* Apply animation to this element */	
 -moz-animation: example4 10s ease-out;
 -webkit-animation: example4 10s ease-out;
 animation: example4 10s ease-out;
}
/* Move it (define the animation) */
@-moz-keyframes example4 {
 0% { -moz-transform: translateX(200%); }
 100% { -moz-transform: translateX(0%); }
}
@-webkit-keyframes example4 {
 0% { -webkit-transform: translateX(200%); }
 100% { -webkit-transform: translateX(0%); }
}
@keyframes example4 {
 0% { 
 -moz-transform: translateX(200%); /* Firefox bug fix */
 -webkit-transform: translateX(200%); /* Firefox bug fix */
 transform: translateX(200%); 		
 }
 100% { 
 -moz-transform: translateX(0%); /* Firefox bug fix */
 -webkit-transform: translateX(0%); /* Firefox bug fix */
 transform: translateX(0%); 
 }
}
</style>

<!-- HTML -->
<div class="example4">
<h3>Slide-in text.</h3>
</div></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/codes/marquees/slide-in_text" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Left to Right</h2> <p>To make the marquee scroll in the opposite direction, change the <a href="/css/functions/css_translatex_function.cfm"><code>translateX()</code></a> values. For example, to scroll from left to right, swap <code>100%</code> with <code>-100%</code> and vice-versa.</p> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>

<!-- Styles -->	
<style>
.example2 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example2 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(-100%);
 -webkit-transform:translateX(-100%);	
 transform:translateX(-100%);
 /* Apply animation to this element */	
 -moz-animation: example2 15s linear infinite;
 -webkit-animation: example2 15s linear infinite;
 animation: example2 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example2 {
 0% { -moz-transform: translateX(-100%); }
 100% { -moz-transform: translateX(100%); }
}
@-webkit-keyframes example2 {
 0% { -webkit-transform: translateX(-100%); }
 100% { -webkit-transform: translateX(100%); }
}
@keyframes example2 {
 0% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 		
 }
 100% { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%); 
 }
}
</style>

<!-- HTML -->
<div class="example2">
<h3>Left to right... </h3>
</div></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/codes/marquees/left_to_right_text" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Scroll Vertically</h2> <p>To scroll vertically, you can use <a href="/css/functions/css_translatey_function.cfm"><code>translateY()</code></a> instead of <a href="/css/functions/css_translatex_function.cfm"><code>translateX()</code></a>.</p> <p>Here, I've increased the height of the outer box in order to free up some room for the element to scroll.</p> <div class="code-only"> <textarea id="example4" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>

<!-- Styles -->	
<style>
.example3 {
 height: 200px;	
 overflow: hidden;
 position: relative;
}
.example3 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateY(-100%);
 -webkit-transform:translateY(-100%);	
 transform:translateY(-100%);
 /* Apply animation to this element */	
 -moz-animation: example3 15s linear infinite;
 -webkit-animation: example3 15s linear infinite;
 animation: example3 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes example3 {
 0% { -moz-transform: translateY(-100%); }
 100% { -moz-transform: translateY(100%); }
}
@-webkit-keyframes example3 {
 0% { -webkit-transform: translateY(-100%); }
 100% { -webkit-transform: translateY(100%); }
}
@keyframes example3 {
 0% { 
 -moz-transform: translateY(-100%); /* Firefox bug fix */
 -webkit-transform: translateY(-100%); /* Firefox bug fix */
 transform: translateY(-100%); 		
 }
 100% { 
 -moz-transform: translateY(100%); /* Firefox bug fix */
 -webkit-transform: translateY(100%); /* Firefox bug fix */
 transform: translateY(100%); 
 }
}
</style>

<!-- HTML -->
<div class="example3">
<h3>Scrolling down... </h3>
</div></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/codes/marquees/scroll_vertically" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode4 = CodeMirror.fromTextArea(document.getElementById("example4"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Bouncing Text</h2> <p>To create bouncing text, add <code>alternate</code> to the end of the <code>animation</code> property. Also, modify the <a href="/css/functions/css_translatex_function.cfm"><code>translateX()</code></a> values so that the text doesn't bounce out of sight (unless that's your intention).</p> <p>I have changed <code>text-align:center;</code> to <code>text-align:left;</code> so that the text can come right across to the left. Note that I've removed the code for the starting position too, although this is optional.</p> <div class="code-only"> <textarea id="example5" autocomplete="off" spellcheck="false"><!DOCTYPE html>
<title>Example</title>

<!-- Styles -->	
<style>
.example5 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example5 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: left;
 /* Apply animation to this element */	
 -moz-animation: example5 5s linear infinite alternate;
 -webkit-animation: example5 5s linear infinite alternate;
 animation: example5 5s linear infinite alternate;
}
/* Move it (define the animation) */
@-moz-keyframes example5 {
 0% { -moz-transform: translateX(70%); }
 100% { -moz-transform: translateX(0%); }
}
@-webkit-keyframes example5 {
 0% { -webkit-transform: translateX(70%); }
 100% { -webkit-transform: translateX(0%); }
}
@keyframes example5 {
 0% { 
 -moz-transform: translateX(70%); /* Firefox bug fix */
 -webkit-transform: translateX(70%); /* Firefox bug fix */
 transform: translateX(70%); 		
 }
 100% { 
 -moz-transform: translateX(0%); /* Firefox bug fix */
 -webkit-transform: translateX(0%); /* Firefox bug fix */
 transform: translateX(0%); 
 }
}
</style>

<!-- HTML -->
<div class="example5">
<h3>Bouncing text... </h3>
</div></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/codes/marquees/bouncing_text" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode5 = CodeMirror.fromTextArea(document.getElementById("example5"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Alternative Scroll Properties</h2> <p>In the above examples we move the text by changing the values of the <a href="/css/functions/css_translatex_function.cfm"><code>translateX()</code></a> and <a href="/css/functions/css_translatey_function.cfm"><code>translateY()</code></a> functions.</p> <p>We could just as easily use other CSS properties to make the elements scroll. For example, we could <a href="/css/codes/marquees/create_css_marquee_using_margins.cfm">use margins</a>. We could also use properties such as <a href="/css/properties/css_left.cfm"><code>left</code></a> and <a href="/css/properties/css_top.cfm"><code>top</code></a> to move the elements vertically or horizontally. Another option for horizontal movement is <a href="/css/properties/css_text-indent.cfm"><code>text-indent</code></a>.</p> <h2>Browser Compatibility</h2> <p>This page uses browser prefixes for maximum browser compatibility. For full standards-compliant code, remove the declarations with browser prefixes (although be aware that doing so may reduce browser compatibility). The browser prefixes are the declarations that include <code>-webkit-</code> and <code>-moz-</code>.</p> </article> <div class="sidebar"> <div class="relatedLinks"> <h4>Related</h4> <ul> <li><a href="/css/codes/marquees/create_fly-in_text_in_css.cfm" title="">Create Fly-In Text</a></li> <li><a href="/css/codes/marquees/how_to_stop_a_marquee_automatically.cfm" title="">How to Stop a Marquee Automatically</a></li> <li><a href="/css/codes/marquees/how_to_pause_a_marquee_on_hover.cfm" title="">How to Pause a Marquee on Hover</a></li> <li><a href="/html/codes/html_marquee_code.cfm" title="">HTML Marquees</a></li> <li><a href="/bootstrap/bootstrap_3/tutorial/bootstrap_carousel.cfm" title="">Bootstrap Carousels</a></li> </ul> </div> <nav> <ul> <li> <h3><a href="/css/codes/">CSS Codes</a></h3> <ul> <li><a href="/css/codes/marquees/" title="">CSS Marquees</a></li> <li><a href="/css/codes/patterns/" title="">CSS Patterns</a></li> <li><a href="/css/css_align.cfm" title="">CSS Align</a></li> <li><a href="/css/css_cellpadding.cfm" title="">CSS Cellpadding</a></li> <li><a href="/css/css_cellspacing.cfm" title="">CSS Cellspacing</a></li> <li><a href="/css/codes/css_floating_menu.cfm" title="">CSS Floating Menu</a></li> <li><a href="/css/css_hyperlinks.cfm" title="">CSS Hyperlinks</a></li> <li><a href="/css/css_leading.cfm" title="">CSS Leading</a></li> <li><a href="/css/inline_style_sheets.cfm" title="Add inline styles directly to your HTML documents">Inline Style Sheets</a></li> <li><a href="/css/embedded_style_sheets.cfm" title="Embed styles to the head of your HTML documents">Embedded Style Sheets</a></li> <li><a href="/css/external_style_sheets.cfm" title="Link to an external style sheet that you can reference from all your HTML documents">External Style Sheets</a></li> <li><a href="/css/css_scrollbars.cfm" title="CSS Overflow - a greate alterntive to inline frames">CSS Scrollbars</a></li> <li><a href="/css/css_table_width.cfm" title="">CSS Table Width</a></li> <li><a href="/css/css_print_version.cfm" title="Use CSS to apply a separate style to the printed version of your web pages.">CSS Print Version</a></li> <li><a href="/css/css_table-layout.cfm" title="For faster loading tables">CSS Table-layout</a></li> <li><a href="/css/examples/" title="">CSS Examples</a></li> </ul> </li> <li> <h3><a href="/css/reference/">CSS Reference</a></h3> <ul> <li><a href="/css/examples/" title="Copy & paste code examples.">CSS Examples</a></li> <li><a href="/css/properties/" title="All CSS properties listed alphabetically.">CSS Properties</a></li> <li><a href="/css/functions/" title="All CSS functions listed alphabetically.">CSS Functions</a></li> <li><a href="/css/data_types/" title="">CSS Data Types</a></li> <li><a href="/css/at-rules/" title="">CSS @-Rules</a></li> <li><a href="/css/selectors/" title="All CSS selectors.">CSS Selectors</a></li> <li><a href="/css/css3/animations/animatable_properties/" title="Properties that support CSS animations.">CSS Animatable Properties</a></li> <li><a href="/css/color/" title="Full CSS color reference, includes color picker, charts, generators, and more.">CSS Color</a></li> <li><a href="/css/css_color_codes.cfm" title="">CSS Color Codes</a></li> <li><a href="/css/tutorial/" title="">CSS Tutorial</a></li> <li><a href="/css/flexbox/tutorial/" title="">Flexbox Tutorial</a></li> <li><a href="/css/grid/tutorial/" title="">Grid Tutorial</a></li> <li><a href="/css/css_media_types.cfm" title="Use CSS to apply a separate style depending on the media type that is displaying your web page">CSS Media Types</a></li> <li><a href="/css/css_media_features.cfm" title="Use CSS to apply a separate style depending on the media features available in the output device">CSS Media Features</a></li> <li><a href="/bootstrap/tutorial/" title="Bootstrap is a free and open-source framework for creating websites and web applications.">Bootstrap Tutorial</a></li> <li><a href="/sass/tutorial/" title="Sass is a CSS preprocessor to help create maintainable style sheets.">Sass Tutorial</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left"> <!-- GAM 71161633/QCKIT_quackit/category_vrec_2 --> <div data-fuse="23059883641"></div> </div> </div> <div class="ads"> <div class="ad ad-right"> <!-- GAM 71161633/QCKIT_quackit/category_vrec_1 --> <div data-fuse="23059511718"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>