JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div id="text">I just faded in!</div>
<button id="hide-button">Click me to fade out the text again</button>

CSS

#text {
  opacity: 0;
}

.show-me {
  animation-name: show-me;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

.hidden {
  opacity: 0;
}

@keyframes show-me {
  100% {
    opacity: 1;
  }
}

JavaScript

$('#text').addClass('show-me');

$('#hide-button').on('click', function() {
	// this doesn't work
  $('#text').css('opacity', 0);
  
  // this won't work either
  // $('#text').addClass('hidden');
});