Reverse animation example

If I reverse the same animation in two classes it stops working

HTML

<div id="example">
  Hello
  <br>
  <br>
  <br>
  <br> Friends
</div>

CSS

div {
  max-height: 1em;
  width: 50px;
  background-color: red;
  color: white;
  text-align: center;
  border-radius: 30px;
  padding: 1em 0;
}

.expanded {
  animation: expand 2s;
  background-color: blue;
}

.collapsed {
  background-color: red;
  //animation: expand 2s reverse; // Uncomment and all animations stop working
}

@keyframes expand {
  0% {
    max-height: 1em;
  }
  50% {
    max-height: 1em;
  }
  100% {
    max-height: 200px;
  }
}

Babel + JSX

const example = document.getElementById('example');

let expanded = false;

example.className = 'expanded';

const toogleClass = () => {
  example.className = expanded ? 'expanded' : 'collapsed';
  expanded = !expanded;
}

setInterval(toogleClass, 2500);