JSFiddle - React, Tailwind, and code Playground

HTML

<div id="element-to-be-animated">

</div>

CSS

#element-to-be-animated {
  width: 200px;
  height: 200px;
  background-color: red;
  opacity: 0;
}

.fade_in {
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

JavaScript

const element = document.getElementById("element-to-be-animated");

element.addEventListener("animationend", () => {

    // Set your final state here:
    element.style["opacity"] = 1;
    
}, { once: true });

element.classList.add("fade_in");