Create CSS Marquees using Margins

Here we create CSS marquees by adjusting the margin of the marquee element. For example, to make text scroll left, we create an animation that adjusts the margin-left property as it runs from start to finish.

In all cases we use the CSS animation property along with the @keyframes rule to create the animation. Then it's just a matter of deciding which direction we want the marquee to scroll.

Right to Left

Here our text starts with a margin of 100% (margin-left:100%) and ends with a margin of negative 100% (margin-left:-100%).

<style>
.example1 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example1 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 animation: example1 15s linear infinite;  /* Apply the animation */
}
/* Define the animation */
@keyframes example1 {
  from {
    margin-left: 100%;
	width: 300%;
  }
  to {
    margin-left: -100%;
	width: 100%;
  }
}
</style>

<div class="example1">
<h3>Left scrolling text... </h3>
</div>

Left to Right

To make it scroll in the opposite direction, change the margin-left values. For example, to scroll from left to right, swap 100% with -100% and vice-versa.

<style>
.example2 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example2 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 animation: example2 15s linear infinite;  /* Apply the animation */
}
/* Define the animation */
@keyframes example2 {
  from {
    margin-left: -100%;
	width: 300%;
  }
  to {
    margin-left: 100%;
	width: 100%;
  }
}
</style>

<div class="example2">
<h3>Right scrolling text... </h3>
</div>

Scroll Vertically

To scroll vertically, you can replace margin-left with margin-top.

Here, I've increased the height of the outer box in order to free up some room for the element to scroll.

<style>
.example3 {
 height: 250px;	
 overflow: hidden;
 position: relative;
}
.example3 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 animation: example3 15s linear infinite;  /* Apply the animation */
}
/* Define the animation */
@keyframes example3 {
  from {
    margin-top: 100%;
  }
  to {
    margin-top: -100%;
  }
}
</style>

<div class="example3">
<h3>Scrolling vertically... </h3>
</div>

Slide-In Text

You can create slide-in text by removing infinite and setting the to value to zero or a positive value. You may need to refresh this page to see the slide-in effect.

<style>
.example4 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example4 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 animation: example4 15s linear;  /* Apply the animation */
}
/* Define the animation */
@keyframes example4 {
  from {
    margin-left: 100%;
	width: 300%;
  }
  to {
    margin-left: 0%;
	width: 100%;
  }
}
</style>

<div class="example4">
<h3>Slide-in text... </h3>
</div>

Bouncing Text

To create bouncing text, add alternate to the end of the animation property. Also, modify the margin-left values so that the text doesn't bounce out of sight (unless that's your intention).

<style>
.example5 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example5 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 animation: example5 3s linear infinite alternate;  /* Apply the animation */
}
/* Define the animation */
@keyframes example5 {
  from {
    margin-left: 70%;
  }
  to {
    margin-left: 0%;
  }
}
</style>

<div class="example5">
<h3>Bouncing text... </h3>
</div>

Alternative Scroll Properties

In the above examples we move the text by changing the values of the margins (i.e. margin-left for horizontal movement and margin-top for vertical).

We could just as easily use other CSS properties to make the elements scroll. For example, we could have used text-indent to move the text horizontally. We could also have used the translateX() transform function to move the text horizontally and the translateY() function to move it vertically. See CSS Marquees for examples of this.

Browser Compatibility

The examples on this page use W3C code—no vendor extensions have been used (such as -webkit- and -moz-). For maximum browser compatibility, you may need to add browser extenstions. However, don't add these if you need W3C-compliant code.

Web.QHMIT.com