Почему ‹marquee› устарел и какова лучшая альтернатива?

Я не думаю, что вам следует перемещать контент, но это не отвечает на ваш вопрос ... Взгляните на 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); }
}

Вот codepen.

Изменить:

Вот codepen снизу вверх.

Вам просто нужно один раз определить класс и прикрепленную анимацию цикла в CSS, а затем использовать ее везде, где вам нужно. Но, как говорили многие, это немного раздражающая практика, и есть причина, почему этот тег устаревает.

.example1 {
  height: 50px;	
  overflow: hidden;
  position: relative;
}
.example1 h3 {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0;
    line-height: 50px;
    text-align: center;

    /* Starting position */
       -moz-transform:translateX(100%);
       -webkit-transform:translateX(100%);	
       transform:translateX(100%);

 /* Apply animation to this element */	
       -moz-animation: example1 15s linear infinite;
       -webkit-animation: example1 15s linear infinite;
       animation: example1 15s linear infinite;
}

/* Move it (define the animation) */
      @-moz-keyframes example1 {
       0%   { -moz-transform: translateX(100%); }
       100% { -moz-transform: translateX(-100%); }
      }
      @-webkit-keyframes example1 {
       0%   { -webkit-transform: translateX(100%); }
       100% { -webkit-transform: translateX(-100%); }
      }
      @keyframes example1 {
       0%   { 
       -moz-transform: translateX(100%); /* Firefox bug fix */
       -webkit-transform: translateX(100%); /* Firefox bug fix */
       transform: translateX(100%); 		
       }
       100% { 
       -moz-transform: translateX(-100%); /* Firefox bug fix */
       -webkit-transform: translateX(-100%); /* Firefox bug fix */
       transform: translateX(-100%); 
       }
      }
    

<div class="example1">
   <h3>Scrolling text... </h3>
</div>

<marquee> никогда не был частью какой-либо спецификации HTML, и то, на что вы ссылаетесь, является спецификацией CSS, поэтому трудно отказаться от того, что никогда не было включено. HTML - это структура документа, а не его представление. Таким образом, наличие самоанимируемого элемента как части HTML не соответствует этим целям. Анимация в CSS.

Как было сказано ранее: самая простая замена - это CSS-анимация.

Всем критикам шатра:

Это очень полезный инструмент для пользовательского интерфейса, я использую его только при наведении курсора, чтобы отображать больше информации в ограниченном пространстве.

Пример для mp3-плеера отличный, даже моя автомагнитола использует эффект, чтобы показать текущую песню.

Так что ничего плохого в этом нет, мое мнение ...

Я создал сценарий jQuery, который заменит старый тег marquee на стандартный div. Код также проанализирует атрибуты marquee, такие как direction, scrolldelay и scrollamount. На самом деле код может пропускать часть jQuery, но я чувствовал себя слишком ленивым для этого, а часть vanilla JS на самом деле является решением, которое я модифицировал из @Stano answere из здесь

Вот код:

jQuery(function ($) {

    if ($('marquee').length == 0) {
        return;
    }

    $('marquee').each(function () {

        let direction = $(this).attr('direction');
        let scrollamount = $(this).attr('scrollamount');
        let scrolldelay = $(this).attr('scrolldelay');

        let newMarquee = $('<div class="new-marquee"></div>');
        $(newMarquee).html($(this).html());
        $(newMarquee).attr('direction',direction);
        $(newMarquee).attr('scrollamount',scrollamount);
        $(newMarquee).attr('scrolldelay',scrolldelay);
        $(newMarquee).css('white-space', 'nowrap');

        let wrapper = $('<div style="overflow:hidden"></div>').append(newMarquee);
        $(this).replaceWith(wrapper);

    });

    function start_marquee() {

        let marqueeElements = document.getElementsByClassName('new-marquee');
        let marqueLen = marqueeElements.length
        for (let k = 0; k < marqueLen; k++) {


            let space = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';
            let marqueeEl = marqueeElements[k];

            let direction = marqueeEl.getAttribute('direction');
            let scrolldelay = marqueeEl.getAttribute('scrolldelay') * 100;
            let scrollamount = marqueeEl.getAttribute('scrollamount');

            let marqueeText = marqueeEl.innerHTML;

            marqueeEl.innerHTML = marqueeText + space;
            marqueeEl.style.position = 'absolute'; 

            let width = (marqueeEl.clientWidth + 1);
            let i = (direction == 'rigth') ? width : 0;
            let step = (scrollamount !== undefined) ? parseInt(scrollamount) : 3;

            marqueeEl.style.position = '';
            marqueeEl.innerHTML = marqueeText + space + marqueeText + space;



            let x = setInterval( function () {

                if ( direction.toLowerCase() == 'left') {

                    i = i < width ? i + step : 1;
                    marqueeEl.style.marginLeft = -i + 'px';

                } else {

                    i = i > -width ? i - step : width;
                    marqueeEl.style.marginLeft = -i + 'px';

                }

            }, scrolldelay);

        }
    }

    start_marquee ();
});

А вот рабочий codepen

Я знаю, что на этот вопрос был дан ответ пару лет назад, но я обнаружил это при просмотре этого. Когда я осмотрел, я нашел это.

@keyframes scroll {
    from {
        transform: translate(0,0)
    }

    to {
       transform: translate(-300px,0)
    }
}

.resultMarquee {
    animation: scroll 7s linear 0s infinite;
    position: absolute
}