JSFiddle - React, Tailwind, and code Playground

by danbeam

HTML

<div class="dev-mode"></div>

CSS

@-webkit-keyframes close {
  100% { height: 0; }
}

@-webkit-keyframes open {
  100% { height: 300px; }
}

.dev-mode {
  background: black;
  height: 300px;
  width: 100px;
}

.closing {
  -webkit-animation: close 1000ms;
}

.opening {
  -webkit-animation: open 1000ms;
}

.closing,
.opening {
  -webkit-animation-fill-mode: forwards;
}

JavaScript

var d = document.querySelector('div');

setTimeout(function() {
  d.classList.add('closing');
}, 500);

d.addEventListener('webkitAnimationEnd', function() {
  if (d.classList.contains('closing')) {
    setTimeout(function() {
      d.classList.add('opening');
    });
  }
});