Recreate Marquee's With CSS

Back in the early days of the website there was a magically HTML tag which you would see everywhere...this tag is the marquee tag. This was used on almost every website, if you don't know about this tag or don't remember it, then basically this tag will make any text you add inside it to scroll across the screen. You can variable the speed and direction the text moves across the screen. Here is a marquee Many people got annoyed with this tag and thankfully has been deprecated from the html specification. But someone developing at webkit missed this tag so much they decided to build a webkit CSS property to create a marquee, which can be used as below.

-webkit-marquee: direction increment repetition style speed;

As it is a webkit property it can only be used on chrome or safari browsers. The marquee property takes 5 parameters: - Direction - Defines the direction of the marquee you have the choice of, ahead, auto, backwards, down, forwards, left, reverse, right and up.

• Increment - Defines the distance the marquee travels per loop.
• Repetition - This is the number of times it loops around. If you want it to be infinite you can just use the value infinite.
• Style - This defines the style of the motion on the marquee, alternate, none, scroll, slide.
• Speed - This defines how fast the marquee will scroll fast, normal, slow

View the demo page to see the different effects created with -webkit-marquee.

.marqueeLeft {  
  overflow-x: -webkit-marquee;
  -webkit-marquee: left large infinite slide slow;
  font-size:1.8em;
}

.marqueeAhead {  
	overflow-x: -webkit-marquee;
  -webkit-marquee: ahead large infinite slide slow;
  font-size:1.8em;
}

.marqueeAuto {  
	overflow-x: -webkit-marquee;
  -webkit-marquee: auto large infinite slide slow;
  font-size:1.8em;
}

.marqueeBackwards {  
	overflow-x: -webkit-marquee;
  -webkit-marquee: backwards large infinite slide slow;
  font-size:1.8em;
}

.marqueeDown {  
	overflow-x: -webkit-marquee;
  -webkit-marquee: down large infinite slide slow;
  font-size:1.8em;
}

.marqueeForwards {  
	overflow-x: -webkit-marquee;
  -webkit-marquee: forwards large infinite slide slow;
  font-size:1.8em;
}

.marqueeReverse {  
	overflow-x: -webkit-marquee;
  -webkit-marquee: reverse large infinite slide slow;
  font-size:1.8em;
}

.marqueeRight {  
	overflow-x: -webkit-marquee;
  -webkit-marquee: right large infinite slide slow;
  font-size:1.8em;
}

.marqueeUp { 
overflow-x: -webkit-marquee; 
  -webkit-marquee: up large infinite slide slow;
  font-size:1.8em;
}