Animate element after .append()

A simple jQuery example of animating a HTML element using CSS3 when appending the element to a container.

HTML

<div id='id1'>
  <button>click</button>
  <div id="id2"></div>
</div>

CSS

#id1 {
  width: 100%;
  transition: all 2 ease;
}

.child {
  background-color: lemonchiffon;
  min-height: 50px;
  border: 1px solid rebeccapurple;
  margin: 10px 0px;
  transition: all 0.5 ease;
  animation: animateElement linear .3s;
  animation-iteration-count: 1;
}

#id2 {
  padding: 20px;
  border: 2px solid blue;
}


@keyframes animateElement{
  0% {
    opacity:0;
    transform:  translate(0px,10px);
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px);
  }
}

JavaScript

$(function() {
  $("#id1 button").click(() => {
    $("#id2").append("<div class='child'>hehe</div>")
  });
});