Toggling a CSS animation
This is what I've come up with, which is nicer than the if/else if statement I was originally using.



$("#show").on("click", function() {
  renewElement($(".animated"));
  var $animated = $(".animated");
  var shown = $animated.hasClass('on');
  $animated.toggleClass('on', !shown).toggleClass('off', shown);
});

function renewElement(e) {
  var newElement = e.clone(true);
  e.remove();
  $(".container").append(newElement);
}
.controls {
  text-align: center;
}

button {
  display: inline-block;
}

.textbox {
  width: 280px;
  margin: 0 auto;
  background: tomato;
  padding: 10px;
}

.animated {
  max-height: 0;
  overflow: hidden;
  animation-name: none;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
.triangle {
  content: " ";
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: transparent transparent tomato transparent;
  position: relative;
  left: 50%;
  top: -9px;
  margin-left: -7px;
}

.on {
  animation-name: slideOpen;
  animation-direction: normal;
}

.off {
  animation-name: slideOpen;
  animation-direction: reverse;
}

@keyframes slideOpen {
  0% {
    max-height: 0px;
    padding: 0px;
  }
  100% {
    max-height: 150px;
  }
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="controls"&gt;
  &lt;button id="show"&gt;Show div&lt;/button&gt;
&lt;/div&gt;
&lt;div class="container"&gt;
  &lt;div class="animated"&gt;
    &lt;span class="triangle"&gt;&lt;/span&gt;
    &lt;div class="textbox"&gt;text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;




As you can see, I've kept the renewElement() function. After reading this article it seems that there isn't much you can do.