使用css3过渡动画-打开和关闭-Transitionanimationwithcss3-OpenandClose

$(document).ready(function(){
	$('.modal-open').click(function(){
		$('.overlay').addClass('modal-show');
		$('.modal').addClass('modal-show modal-perspective');
		$('.modal-content').addClass('modal-animate');
	});
	$('.modal-close').click(function(){
		$('.overlay').removeClass('modal-show');
		$('.modal').removeClass('modal-show modal-perspective');
		$('.modal-content').removeClass('modal-animate');
	    $('.modal-content').addClass('modal-remove');

	});
});

html, body{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background: #FF3300;
	font-family: 'Ubuntu', sans-serif;
}

.modal{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	height: auto;
	min-width: 300px;	
	z-index: 2;
	visibility: hidden;	
	display: flex;
	align-items: center;
	justify-content: center;

}

.modal-content{
	padding: 120px 10px;
	text-align: center;
	color: #000;
	background: #bd330f;
	border-radius: 10px;	
	border: 1px solid #909090;	
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.9);	
}

.modal-open{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: transparent;
	background: #fff;
	font-size: 15px;
	font-weight: bold;
	padding: 20px 50px;
	border-radius: 5px;
}

.modal-open:active{
	outline: transparent;
}

.modal-close{
	padding: 8px 40px;
    border-radius: 8px;
    border: transparent;
    background: #212121;
    color: #fff;
    outline: transparent;	
}

.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	visibility: hidden;
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0;
	background: rgba(0, 0, 0, 0.5);
	transition: all 0.7s;
}

.modal-show {
	opacity: 1;
	visibility: visible;	
}

.modal-perspective{
	    -webkit-perspective: 900px; 
	    perspective: 900px;			
}

.modal-animate{
	animation: openmodal 300ms ease-in forwards;	
}

.modal-remove{
	animation: closemodal 300ms ease-in-out forwards;	
}

@keyframes openmodal{
	0%{
		transform: rotateX(-70deg);
		-webkit-transform: rotateX(-70deg);
		-moz-transform: rotateX(-70deg);
		-ms-transform: rotateX(-70deg);
	}	

	100%{
		transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
		-moz-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
	}
}

@keyframes closemodal{
	0%{
		transform: rotateX(0deg);
		-webkit-transform: rotateX(0deg);
		-moz-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
	}	

	100%{
		transform: rotateX(-70deg);
		-webkit-transform: rotateX(-70deg);
		-moz-transform: rotateX(-70deg);
		-ms-transform: rotateX(-70deg);		
	}
}

	

		
Modal Dialog
		
				
			
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi gravida libero nec velit. Morbi scelerisque luctus velit. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Proin mattis lacinia justo. Vestibulum facilisis auctor urna. Aliquam in lorem sit amet leo accumsan.
			CLOSE ME!
		
	


~ OPEN MODAL ~