After experimenting with different styles for another element, I added padding, height, and opacity to the div. However, there seems to be no transition effect with the current CSS code. Can anyone explain why?
When a button is clicked, the class .show is applied to the contactEmote div:
#contactEmote{
display: none;
top: 0px;
background-color: #f65b61;
width: 100%;
z-index: 2000;
opacity:0;
clear: both;
height: 0px;
padding: 0 8px;
overflow: hidden;
-webkit-transition: all .3s ease .15s;
-moz-transition: all .3s ease .15s;
-o-transition: all .3s ease .15s;
-ms-transition: all .3s ease .15s;
transition: all .3s ease .15s;
-webkit-box-shadow: 0px 4px 35px -1px rgba(0,0,0,0.68);
-moz-box-shadow: 0px 4px 35px -1px rgba(0,0,0,0.68);
box-shadow: 0px 4px 35px -1px rgba(0,0,0,0.68);
}
#contactEmote.show{
top: 0px;
display: block;
height: 100px;
opacity: 1;
padding: 8px;
}