JSFiddle - React, Tailwind, and code Playground

HTML

<div id="location-name-container">
      <div id="location-name" class="nothing">Hello</div>
</div>

<script>
setInterval(myFunction, 3000)
var a = 1


function myFunction(){

document.getElementById('location-name').innerHTML = "Hello"+a

a++
}
</script>

CSS

#location-name {

	background:#003344;
	align-self: center;
	width: 540px;
    max-height: 100px;
	color: #FFFFFF;
	-webkit-text-stroke-color: #000000;
	font-size: 42px;
	line-height: 50px;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	animation: fade-in 2s linear;
	
}

@keyframes fade-in {
   0%{
   color:black;
  }
  30%{
  color:blue;
  }
  80%{
  color:green
  }
  
   from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }