CSS3中动画的制作案例

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@-webkit-keyframes 'expand' {
				0%	{border-width: 4px;}
				50%	{border-width: 12px;}
				100% {
					border-width: 4px;
					height: 130px;
					width: 150px;
				}
			}
			.donghua {
				border: 4px solid green;
				height: 100px;
				width: 100px;
				box-sizing: border-box;
				-webkit-animation: 'expand' 6s ease 1s 10 alternate;
			}
			.donghua:hover {
				-webkit-animation-play-state: paused;
			}
		</style>
	</head>
	<body>
		<div style="width: 800px;height: 600px;border: 1px solid;">
			<div class="donghua">
				
			</div>
		</div>
	</body>
</html>

最后的效果：