Implementing Marquee with CSS: Horizontal Scrolling Animation

There used to be a `marquee` tag, but it has been deprecated since HTML5.

It was a tag that simply repeated horizontal text scrolling, often used in advertisements for feature phones and similar devices.

Recently, the `marquee` effect seems to be gaining renewed attention. The other day, I had the opportunity to implement it myself after a long time.

However, since the `marquee` tag can no longer be used, I implemented it with CSS animations.

IMPLEMENTING HORIZONTAL SCROLLING ANIMATION (MARQUEE) WITH CSS

CODE

// HTML
<div class="text-marquee__container">
    <div class="text-marquee__text">CSSで実装するMarquee横スクロールアニメーション！</div>
</div>

// CSS
.text-marquee__container {
  overflow: hidden;
}
.text-marquee__text {
  transform: translateX(100%);
  animation: marquee 15s linear infinite;
}
@keyframes marquee {
  0% {
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  100% {
    -moz-transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

Brief Explanation

Set `overflow: hidden` on the outer tag to hide elements that extend beyond its boundaries.

The implementation is complete by simply applying a horizontal scrolling animation to the inner tag.

RECOMMENDED BOOKS ON CSS/SASS

Once you understand the basics of CSS and SCSS, I believe it's quicker to look things up with Google. If you grasp how CSS works and how to use SASS, you'll generally be fine.

The Complete Guide to HTML & CSS and Web Design in One Book