JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a" onclick="pew()"></div>
<p id="display">0</p>

CSS

#a {
  background: gray;
  width: 30px;
  height: 30px;
  animation: foo 5s linear 2s infinite alternate;
}

@keyframes foo {
    0%   {background-color:gray;pointer-events: auto;}
    49%   {background-color:gray;pointer-events: auto;}
    50%  {background-color:red;pointer-events: none;}
    100%  {background-color:red;pointer-events: none;}
}

JavaScript

var x = 0
function pew(){
	display.innerHTML = ++x
}