How to make a marquee without the tag marquee?

Posted on

Question :

I need to use a marquee , but as everyone is saying marquee is a prehistoric thing and should not be used anymore, I am in doubt as to what to use in his place. On the MDN website it says this:


This feature is deprecated. While it may still work in some browsers, its use is discouraged as it can be removed at any time. Try to avoid using it.

What are my options? I am looking for something that is as close as possible to:

<marquee>Texto aqui</marquee>


Answer :

As a matter of fact, the <marquee> tag is considered obsolete in HTML5 , since it is an element focused on behavior and appearance, not content structure. Therefore, it is recommended that something similar be done with CSS and / or JavaScript.

Below is a solution that uses only CSS, based on an answer in English . Note that the example uses -prefix-free to make the CSS cleaner (this is a JS that adds the prefixes for you, so that resources that depend on prefixes, such as -webkit , -moz and -ms , work in as many browsers as possible.)

.marquee {
  width: 100px;
  height: 22px;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid #ccc;
  padding: 2px;
.marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
@keyframes marquee {
  0% {
    transform: translate(0, 0);
  100% {
    transform: translate(-100%, 0);
<div class="marquee"><span>Lorem ipsum dolor sit amet</span></div>


The operation is very simple:

  • The rules in .marquee define the appearance of the outer box. Important detail is white-space: nowrap; , which holds the content in a single line.

  • The rules in .marquee span push the contents all the way to the right (so that the marquee starts empty), and the basic parameters of the animation (called marquee ), lasting 15 seconds and infinite repetition.

  • @keyframes marquee defines two keyframes for the animation, one with the content in the original position, and the other for the content fully shifted to the left, at the end of the animation.
  • >

Leave a Reply

Your email address will not be published. Required fields are marked *