JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<p>Ohhh look at me</p>

<span id="t">timer</span>

CSS

@keyframes fade {
  0%, 75%, 100% {
    opacity: 1;
  }
  80%, 95% {
    opacity: 0;
  }
}

p {
  animation: fade 20s infinite;
}

JavaScript

// ignore this - it's just the timer so you can
// more easily tell if I understood your requirement

let start = new Date();
function update() {
	document.getElementById("t").innerHTML = (((new Date() - start) / 1000) % 20).toFixed(3);
  window.requestAnimationFrame(update)
}

update();