<button class="add-box">+</button>
@keyframes expand {
  from {
    transform: scale(0);
    opacity: 0;
    background: #5470B0;
  }
}

.add-box {
  float: left;
  width: 100px;
  height: 100px;
  background: #BDFCED;
  color: #00DECF;
  font-size: 50px;
  vertical-align: middle;
  border: 0;
  cursor: pointer;
  
  &:focus {
    outline: 0;
  }
}

.box {
  float: left;
  background: #00DECF;
  width: 100px;
  height: 100px;
  animation: expand .5s ease-in-out;
}

body {
  background: #5470B0;
}
View Compiled
$(function() {
  $('.add-box').click(function() {
    $('<div class="box"></div>').appendTo('body');
  })
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js