JSFiddle - React, Tailwind, and code Playground

HTML

<button class="count" id="count" onclick="getAnimState()">Click to see opacity</button>

CSS

@property --opacity {
  syntax: "<number>";
  initial-value:009;
  inherits: false;
}
@keyframes breatheFade {
  0%,100%{--opacity:25;}
  50%{--opacity:100;}
}
.count {
  animation-name: breatheFade;
  animation-iteration-count: infinite;
  animation-duration: 1.5s;
  font-size: 20vh;
  opacity: calc(var(--opacity)*1%);
}

JavaScript

function getAnimState() {
  document.getElementById("count").innerHTML = getComputedStyle(document.documentElement).getPropertyValue("--opacity")
}