fadeIn-css3动画

建议使用谷歌浏览器或者是使用IE10及以上版本的浏览器

fadeIn

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fadeIn</title>
<style>
.main{ text-align: center;}
.fadeIn{
	animation-name: fadeIn;
	-webkit-animation-name: fadeIn;

animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;

visibility: visible !important;	
}

@keyframes fadeIn {
	0% {
		transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		transform: scale(1.1);	
	}
	80% {
		transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		transform: scale(1);
		opacity: 1;	
	}		
}

@-webkit-keyframes fadeIn {
	0% {
		-webkit-transform: scale(0);
		opacity: 0.0;		
	}
	60% {
		-webkit-transform: scale(1.1);
	}
	80% {
		-webkit-transform: scale(0.9);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}		
}

</style>
</head>