Why is marquee deprecated and what is the best alternative?

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.


Here is the bottom to top codepen.

Leave a Comment