appearing and disappearing text

by Richard Hunter

HTML

<div id="text">Testing Testing 123</div>

CSS

#text {
  display: none;
  opacity: 0;
  width: 500px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: white;
  align-items: center;
  justify-content: center;
  transition-duration: 2s;
  background-color: black;
  border-radius: 5px;
}

JavaScript

text = document.getElementById("text");

window.setTimeout((function () {
  text.style.display = "flex";
  document.body.offsetHeight;

  text.addEventListener('transitionend', function listener1() {
    text.removeEventListener('transitionend', listener1);
    
    text.addEventListener('transitionend', function listener2() {
    	text.removeEventListener('transitionend', listener2);
      text.style.display = 'none';
    });
    
    window.setTimeout(function () {
    	text.style.opacity = 0.1;
    }, 1000);
  });
  
  text.style.opacity = 1;
  
}), 2000);