<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');
})
})
This Pen doesn't use any external CSS resources.