3
回答
如何用jquery控制div依次执行动画
开发十年,就只剩下这套Java开发体系了   

如何用jquery控制div依次显示里面的动画呢!

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
</head>
<style>
	*{
		padding: 0;
		margin: 0;
	}
	body{
		width: 100%;
		height: 100%;
		background: #f5f5f5;
	}
	#container{
		width: 960px;
		margin: 10em auto;
	}
	#container .content{
		width: 25%;
		height: 200px;
		float: left;
		text-align: center;
		padding:10px;
		margin: 10px;
		background: #abcdef;
		border: 1px solid #000;
		-webkit-animation-name: card-in;
		-webkit-animation-duration: .5s;
		animation-name: card-in;
		animation-duration: .5s;
	}
	@-webkit-keyframes card-in {
		from {
			opacity: 0;
			-webkit-transform: scale(1.3);
			transform: scale(1.3);
		}
		to {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}
	@keyframes card-in {
		from {
			opacity: 0;
			-webkit-transform: scale(1.3);
			transform: scale(1.3);
		}
		to {
			opacity: 1;
			-webkit-transform: scale(1);
			transform: scale(1);
		}
	}
</style>
<body>
	<div id="container">
		<div class="content">123465798</div>
		<div class="content">123465798</div>
		<div class="content">123465798</div>
		<div class="content">123465798</div>
		<div class="content">123465798</div>
		<div class="content">123465798</div>
		<div class="content">123465798</div>
		<div class="content">123465798</div>
		<div class="content">123465798</div>
	</div>

</body>
</html>



举报
顶部