CSS Обратная анимация не работает в моих кодах

Question

Пытаюсь создать меню аккордеона. Когда вы щелкаете по пункту меню, он скользит вниз, открывая его содержимое. Если снова щелкнуть то же меню, оно сдвинется вверх, чтобы скрыть его содержимое. Я использую анимацию CSS для перемещения вверх и вниз. У меня почему-то не работает обратная анимация. Может кто-нибудь помочь? Спасибо!

window.onload = function() {
	var acc = document.getElementsByClassName("accordion");
	var i;
	var panel;
	for(i=0; i<acc.length; i++) {
			acc[i].addEventListener("click", function() {
			this.classList.toggle("active");
			panel = this.nextElementSibling;
			if(panel.style.display === "block"){
				panel.style.animation = "example " + 2 + "s";
				panel.style.animationDirection = "reverse";
				panel.style.height = 0+"px";
				panel.style.display = "none";
			}
			else {
				panel.style.animation = "example " + 2 + "s";
				panel.style.animationDirection = "normal";
				panel.style.height = 200+"px";
				panel.style.display = "block";
			}
		})
	}
}

.accordion {
  width: 400px;
  height: 100px;
  background: gray;
  display: block;
  border: none;
  outline: none;
}

.active, button:hover {
  opacity: 0.5;
}

div {
	display: none;
	width: 400px;
	background-color: red;
	padding: 8px 8px;
	box-sizing: border-box;
}

@-webkit-keyframes example {
	from{height: 0px;}
	to{height: 200px;}
}

@keyframes example {
	from{height: 0px;}
	to{height: 200px;}
}

<button class="accordion">Menu 1</button>
<div class="panel">Loresum 1...</div>
<button class="accordion">Menu 2</button>
<div class="panel">Loresum 2...</div>
<button class="accordion">Menu 3</button>
<div class="panel">Loresum 3...</div>