как динамически добавлять текст для выделения на html с помощью javascript

Question

Мне интересно, как динамически добавлять текстовую пометку, я пытался использовать такие метки:

<marquee scrollamount="5" loop="infinite" id="paragraph"> This is sample of my marquee </marquee>

, и я добавляю такой текст:

document.getElementById("paragraph").innerHTML += ' This is how i to append text';

это работает, но проблема в том, что я добавляю текст для выделения первой анимации, которая не работает должным образом (текст справа налево не заканчивается sh и снова начинает цикл), поэтому область запуска только до тех пор, пока текст не будет добавлен и l oop и когда анимация не запустится l oop, затем анимация выделения запускает весь текст (текст справа налево завершается sh до его окончания sh и исчезает затем снова l oop)

и у меня также есть попытался сделать выделение с использованием ключевых кадров, как это:

function AppendData(){
          
            document.getElementById("marquee").innerHTML += 'This is how i append data to marquee';
            
        }

@keyframes marquee {
          0%   { text-indent: 100% }
          100% { text-indent: -100% }
      }

      @-webkit-keyframes marquee {
          0%   { text-indent: 100% }
          100% { text-indent: -100% }
      }

      .marquee {
          overflow: hidden;
          white-space: nowrap;
          animation: marquee 17s linear infinite;
          -webkit-animation: marquee 17s linear infinite;
      }

      .marquee:hover {
          -webkit-animation-play-state: paused;
          animation-play-state: paused;
      }

<button onclick="AppendData()">Append Data</button>

<p class="marquee" id="marquee">This is my marquee not using marquee tags but using the keyfames by css.</p>

но проблема та же с использованием меток, потому что 100% { text-indent: -100% } не dymani c,

мой вопрос как заставить бегущую бегущую динамически до конца sh или исчезать слева направо, когда я добавляю текст в первую бегущую беговую дорожку?

Answer 1

Это должно работать

function AppendData(){
                e = document.querySelector('.marquee');
                
                    document.querySelector("span").append("new data")
                 
             }

.marquee span {
  display: inline-block;
  white-space:nowrap;
  padding-left: 100%;
  will-change: transform;
  /* show the marquee just outside the paragraph */
  animation: marquee 5s linear infinite;
}

.marquee span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}


/* Respect user preferences about animations */

@media (prefers-reduced-motion: reduce) {
  .marquee { 
    white-space: normal 
  }
  .marquee span {
    animation: none;
    padding-left: 0;
  }
}

<button onclick="AppendData()">Append Data</button>

<div class="marquee" style="overflow: show">
            <span>
                This is my marquee not using marquee tags but using the keyfames by css.
            </span>
            </div>