How to implement marquee in CSS. Side-scrolling animation

There used to be a tag marquee, but it has been deprecated since html5.
The tag simply repeats side-scrolling of characters, but it was often used in advertisements such as feature phones.

It seems that marquee has been reviewed again recently. The other day, I had the opportunity to implement it.
However, the marquee tag cannot be used, so I implemented it with CSS animation.
This time, I will introduce the side-scrolling animation of CSS.

Side-scrolling animation implemented in CSS (marquee)

Below is the specific code.

CODE

// HTML
<div class="text-marquee__container">
    <div class="text-marquee__text">Implement marquee in CSS. Side-scrolling animation</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 commentary

Specify overflow: hidden in the outer tag to hide the elements outside the frame.
Just specify a simple side-scrolling animation for the tag inside and you’re done.