JSFiddle - React, Tailwind, and code Playground

by Nitesh Sharma

HTML

<div id="location-name-container">
      <div id="location-name"></div>
</div>

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;
}

@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; }
  }

JavaScript

$(document).on('contentchanged', '#location-name', function() {
 var me = this;
  this.style.animation = 'none';
  setTimeout(function() {
    me.style.animation = 'fade-in 2s';
  }, 10);
});

setInterval(myFunction, 4000)
var a = 1

function myFunction(){
$('#location-name').trigger('contentchanged')
document.getElementById('location-name').innerHTML = "Hello"+a;
a++
}