JSFiddle - React, Tailwind, and code Playground

by koshonson

HTML

<div>
  <span id="spA" onclick="toggleFx('spA')">A</span>
  <span id="spB" onclick="toggleFx('spB')">B</span>
  <span id="spC" onclick="toggleFx('spC')">C</span>
  <span id="spD" onclick="toggleFx('spD')">D</span>
</div>

CSS

div {
  display: flex;
  flex-flow: column;
}

.red {
  color: #f00;
}

span.pulse {
	animation: pulse_active 1.5s ease-in infinite;
}

@keyframes pulse_active {
	0% {
		opacity: 1;
	}
	66% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

JavaScript

let baseTime = null;

function toggleFx(spanID) {

	const spanTarget = document.getElementById(spanID);
  spanTarget.classList.add('red');
  
  if (!baseTime) {
    baseTime = Date.now();
    spanTarget.classList.add('pulse');
  } else {
    const now = Date.now();
  	setTimeout(() => {
    	spanTarget.classList.add('pulse');
    }, (1500 - ((now - baseTime) % 1500)));
  }
}