JSFiddle - React, Tailwind, and code Playground

by Rodrigo Portillo

HTML

<div class="palavrinhas">
  <h1>
    <span>Eu digo:</span> <span id="word" class="slide">Oi</span>
  </h1>
</div>

CSS

.palavrinhas{
  overflow:hidden;
}

.palavrinhas h1{
  display:flex;
  justify-content: center;
  transition: 1s all;
}

.slide{
  animation: sliderFrames ease-out 1s;
  display: inline-block;
}

@keyframes sliderFrames{
  0% {
    transform: translateX(80vw);
  }
  100% {
    transform: translateX(0);
  }
}

JavaScript

var words = ["MacarrĂŁo", "Jerimum", "Bananal", "Briocotu"];
var i = 0;
var max = words.length;

changeWords(words[i]);
setInterval(()=>{
  i++;
	if(i >= max){
  	i = 0;
  }
  changeWords(words[i]);
},4000);

function changeWords(nword){
	let word = document.querySelector("#word");
  word.classList.remove("slide");
  
  setTimeout(()=>{
    word.innerHTML = "";
    word.innerHTML = nword;
    word.classList.add("slide");
  }, 200);
}