Separate animation for string update with setInterval

Question

In JavaScript I have:

var strArray = ["string 1", "string 2", "string 3"];

and random string update() loaded function:

function update() {
  var randStr= Math.floor(Math.random()*strArray.length);
  s1.innerHTML = strArray[randStr];
}
setInterval(update, 6000);

in html:

 <div id="s1" class="str1"></div>

where I use webkit to animate letter spacing:

.str1{
  -webkit-animation:compression 6s forwards;
}

@-webkit-keyframes compression {
  from 
  {
    letter-spacing: 1px;  
  } 
  to 
  {  
    letter-spacing: 0px;
  }
}

this animation naturally works with page loading, but I'm trying to figure out, how it is possible create animation with update of setInterval(update, 6000); for each new random string appearance

Answer 1

Changing animation name will do a trick to restart the animation.

const s1 = document.querySelector(".str1");
let strArray = ["Text1", "Text2", "Text3"];

function update() {
  var randStr = Math.floor(Math.random() * strArray.length);
  s1.innerHTML = strArray[randStr];
  s1.style.animationName = "anything";
  
  setTimeout(() => { // setTimeout needed
    s1.style.animationName = "compression";
  }, 10);
}
setInterval(update, 2000);

.str1 {
  animation: compression 2s forwards;
}

@keyframes compression {
  from {
    letter-spacing: 15px;
  }
  to {
    letter-spacing: 0px;
  }
}

<div id="s1" class="str1">Text</div>