JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

HTML

<button onclick="show()">show</button>
<button onclick="hide()">hide</button>

<div id="el" class="element"></div>

CSS

@keyframes show_ {
  from {
    opacity: 0;
  }
  
  to {
    opacity: 1;
  }
}

@keyframes hide_ {
  from {
    opacity: 1;
  }
  
  to {
    opacity: 0;
  }
}


.element {
  display: none;
  background: gray;
  color: white;
  width: 200px;
  height: 200px;
  
}

.element:not(.show) {
  animation: hide_ 1s;
}

.show {
  display: block;
  animation: show_ 1s;
}

JavaScript

function show() {
	document.getElementById('el').classList.add('show')
}

function hide() {
	document.getElementById('el').classList.remove('show')
}