JSFiddle - React, Tailwind, and code Playground

HTML

<label class="trigger">
  <input type="checkbox">clickMe</input>
  <span class="msg">
    INVIATO
  </span>
</label>

CSS

@keyframes showAndHide {
      0% { opacity: 1; }
    100% { opacity: 0; }
}

.trigger {
  width: 100px;
  height: 100px;
  position: relative;
}

.msg {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.trigger input[type='checkbox'] {
  display: none;
}

.trigger input[type='checkbox'] + span {
  opacity: 0;
}

.trigger input[type='checkbox']:checked + span {
  -webkit-animation-name: showAndHide;
          animation-name: showAndHide;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
          animation-iteration-count: 1;
          animation-timing-function: step-end;
  /*visibility: visible;
  opacity: 1;*/
  transition-delay: 0s;
}

JavaScript

/*function animate() {
      var s = document.getElementById("div2").style;
      s.animationName = 'showAndHide';
      s.animationDuration = '3s';
}*/