JSFiddle - React, Tailwind, and code Playground

HTML

<div class=box></div>
<div class=box></div>

CSS

@keyframes anim {
 from {
  height: 100px;
 }
 to {
  height: 0;
 }
}
@-webkit-keyframes anim {from{height:100%;}to{height:0;}}

.box {
 width: 50px;
 display: inline-block;
 background: #5f0;
 height: 100px;
 border: 1px solid #000;
}
.box:first-of-type {
 animation: anim 10s cubic-bezier(0,1,.5,1);
 -webkit-animation: anim 10s cubic-bezier(0,1,.5,1);
}
.box:last-of-type {
 animation: anim 10s cubic-bezier(0,.5,.5,1);
 -webkit-animation: anim 10s cubic-bezier(0,.5,.5,1);
}