how to fade in a css message for 3 seconds after a button click?

I have my code from this site: https://isabelcastillo.com/error-info-messages-css

I want that a css message box is shown for 3 seconds after a button click and then the message is fading out.

Here is my code:

.isa_success,
.isa_error {
  margin: 8px 0px;
  padding: 8px;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%);
}

.isa_success {
  color: #4F8A10;
  background-color: #DFF2BF;
  border-radius: .5em;
  opacity: 0;
  -webkit-animation: fadeInOut 3s;
  animation: fadeInOut 3s;
}

.isa_error {
  color: #D8000C;
  background-color: #FFD2D2;
  border-radius: .5em;
  opacity: 0;
  -webkit-animation: fadeInOut 3s;
  animation: fadeInOut 3s;
}
<button id="handle">Fade</button> 
<div id="isa_success">Whatever you want here - images or text</div>
Test
<script type="text/javascript">
function start() {
var slideSource = document.getElementById('isa_success');
document.getElementById('handle').onclick = function () {
slideSource.classList.add('fade');
}}
</script>

This script does not work.