Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Marquees >> Marquee Left To Right Direction


Code Snippet </> Info


Snippet Name: Marquee Left To Right Direction

Description: Add a smooth CSS animated marquee message.

Example: View Code Demo


Note: Adjust the color styles to your preferences.

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-08-26 22:43:23

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!DOCTYPE html> <html> <head> <title>CSS Marquee Left To Right Direction</title> <style> /* Begin CSS Marquee Left To Right Direction */ /* This Script Free To Use Providing This Notice Remains */ /* This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library */ html {background-color:#000000;} BODY {font-family:tahoma,verdana,arial,ms sans serif; font-size:90%; color:#ffffff;} h1, h2, h3 {font-family:Tahoma, Arial, sans-serif;color:#fff;text-shadow:1px 1px 0px #000000;filter:dropshadow(color=#000000, offx=1, offy=1);} a {color:#00b1dc;text-decoration:none;} a:hover {color:#0097bc;} .wrapper {width:500px;margin:25px auto;} .marquee {width:500px;height:50px;margin:25px auto;overflow:hidden;position:relative;border:1px solid #000;background-color:#222;-webkit-border-radius:5px;border-radius:5px;-webkit-box-shadow:inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);box-shadow:inset 0px 2px 2px rgba(0, 0, 0, .5), 0px 1px 0px rgba(250, 250, 250, .2);-webkit-transition:background-color 350ms;-moz-transition:background-color 350ms;transition:background-color 350ms;} .marquee p {position:absolute;font-family:Tahoma, Arial, sans-serif;width:100%;height:100%;margin:0;line-height:50px;text-align:center;color:#fff;text-shadow:1px 1px 0px #000000;filter:dropshadow(color=#000000, offx=1, offy=1);transform:translateX(100%);-moz-transform:translateX(100%);-webkit-transform:translateX(100%);} .marquee p:nth-child(1) {animation:left-one 20s ease infinite;-moz-animation:left-one 20s ease infinite;-webkit-animation:left-one 20s ease infinite;} .marquee p:nth-child(2) {animation:left-two 20s ease infinite;-moz-animation:left-two 20s ease infinite;-webkit-animation:left-two 20s ease infinite;} #notes {width:500px;height:50px;margin:25px auto;overflow:hidden;position:relative;} #snippet {width:500px;height:50px;margin:25px auto;overflow:hidden;position:relative;} /*================================ Move the Marquee to the Left ==================================*/ /** Mozilla Firefox Keyframes **/ @-moz-keyframes left-one {0%{-moz-transform:translateX(100%);} 10% {-moz-transform:translateX(0);} 40% {-moz-transform:translateX(0);} 50% {-moz-transform:translateX(-100%);} 100%{-moz-transform:translateX(-100%);} } @-moz-keyframes left-two {0% {-moz-transform:translateX(100%);} 50% {-moz-transform:translateX(100%);} 60% {-moz-transform:translateX(0);} 90% {-moz-transform:translateX(0);} 100%{-moz-transform:translateX(-100%);} } /** Webkit Keyframes **/ @-webkit-keyframes left-one {0% {-webkit-transform:translateX(100%);} 10% {-webkit-transform:translateX(0);} 40% {-webkit-transform:translateX(0);} 50% {-webkit-transform:translateX(-100%);} 100%{-webkit-transform:translateX(-100%);} } @-webkit-keyframes left-two { 0% {-webkit-transform:translateX(100%);} 50% {-webkit-transform:translateX(100%);} 60% {-webkit-transform:translateX(0);} 90% {-webkit-transform:translateX(0);} 100%{-webkit-transform:translateX(-100%);} } </style> </head> <body> <div class="wrapper"> <h1>Marquee with CSS3 Animation</h1> <h3>Move the text from the right to the left</h3> <div class="marquee"> <p><a href="http://snapbuilder.com">This is a smooth marquee code snippet demonstration.</a></p> <p><a href="http://snapbuilder.com">It's not choppy like the old standard MARQUEE code was!</a></p> </div> </div> <div id="notes"><p>This CSS Marquee Code Snippet allows 2 messages inserted.</p></div> <div id="snippet"><p>[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_131.html">HTML5 CSS Marquee Code Snippet</a> page. ]</p></div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library