Cacher is the code snippet organizer for pro developers

<div class="container">
  <h1>Header One</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>

setTimeout(function() {
  $(".container").addClass("slideDown");
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

.container {
  background: #dcdcdc;
  padding: 1rem;
  width: 20rem;
  visibility: hidden;
}

.slideDown{
	animation-name: slideDown;
	animation-duration: 1s;	
	animation-timing-function: ease;	
	visibility: visible !important;						
}

@keyframes slideDown {
	0% {
    opacity: 0;
		transform: translateY(-100%);
	100% {
    opacity: 1;
		transform: translateY(0%);
	}		
}