javascript - Why is <marquee> deprecated and what is the best alternative?

Question

Longer time I'm curious about HTML tag <marquee>.

You can find in MDN specification:

Obsolete This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

or on W3C wiki:

No, really. don't use it.

I searched several articles and found some mention about CSS relevant replacement. CSS attributes like:

marquee-play-count
marquee-direction
marquee-speed

but it seems, they don't work. They were a part of specification in year 2008, but they were excluded in year 2014

One way, proposed by W3 Consortium, is using CSS3 animations, but it seems for me much more complicated than easy-to-maintain <marquee>.

There are also plenty of JS alternatives, with lots of source code that you can add to your projects and make them larger.

I'm always reading things as: "don't ever use marquee", "is obsolete". And I don't get why.

So, can anybody explain to me, why is marquee deprecated, why is so "dangerous" using it and what is the easiest substitution?

I found an example, it looks nice. When you use all prefixes needed for good browser support, you have around 20-25 lines of CSS, with 2 values hardcoded (start and stop indent), depending on text length. This solution is not so flexible, and you can't create bottom-to-top effect with this.

Answer 1

I don't think you should move the content but that doesn't answer your question... Take a look at the CSS:

.marquee {
    width: 450px;
    line-height: 50px;
    background-color: red;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}
.marquee p {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

Here is the codepen.

Edit:

Here is the bottom to top codepen.