CSS Marquee

While you need JavaScript to create a continuous marquee (where there is no gap between the end of the content and the start of the next iteration, you can create a regular marquee (where one copy of the content disappears before the next copy appears) with just a few lines of CSS.

This marquee starts with the content at the right and scrolls it to the left. Once the content has completely disappeared leaving the space for the marquee completely empty it will then start over again. Note that by switching which translate statement has the minus sign on the front of the 100% you can switch the direction of the marquee to go left to right instead.

To create our marquee we just need to add a couple of classes to the div containing the content of the marquee.

<div class="marquee right2left">This is marquee text. This is marquee text.
 This is marquee text. This is marquee text.</div

Then all we need to do is to define the CSS to style that content as a marquee. Note that we are using two classes to make it easier to style marquees that run at different speeds (by changing the animation) or different directions (by copying and amending the keyframes).

.marquee {
  position: absolute;
  display: none;
  white-space: nowrap;
}

.marquee.right2left {
  display: block;
  animation: right2left 15s linear infinite;
}

@keyframes right2left {
  from {
    transform: translate(100%, 0);
  }
  to {
    transform: translate(-100%, 0);
  }
}

Here's what the above marquee looks like.

This is marquee text. This is marquee text. This is marquee text. This is marquee text.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate