CSS3做涟漪的效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>涟漪的效果</title>
	<style>
	@keyframes myfirst
	{
	from {border:0 solid #E4684D; left:1px;top: 1px;}
	to {border:12px solid #E4684D; left:-11px;top: -11px;}
	}

	@-moz-keyframes myfirst 
	{
	from {border:0 solid #E4684D; left:1px;top: 1px;}
	to {border:12px solid #E4684D; left:-11px;top: -11px;}
	}

	@-webkit-keyframes myfirst 
	{
	from {border:0 solid #E4684D; left:1px;top: 1px;}
	to {border:12px solid #E4684D; left:-11px;top: -11px;opacity: 0;}
	}

	@-o-keyframes myfirst 
	{
	from {border:0 solid #E4684D; left:1px;top: 1px;}
	to {border:12px solid #E4684D; left:-11px;top: -11px;}
	}
	.box {
		background-position: 0 0;
		margin: 300px auto;
		border-radius: 50%;
		width: 86px;
		height: 86px;
		background: url(http://imgcache.qq.com/ac/www_tencent/join/images/icon_post.png) no-repeat 0 0;
		position: relative;
		/*#E4684D*/
	}
	.box:after {
		content: "";
		display: block;
		height: 84px;
		width: 84px;
		border-radius: 84px;
		position: absolute;
		border:0 solid #E4684D; 
		left:-1px;
		top: -1px;
		opacity: 1;
	}
	.box:hover:after {
		animation: myfirst 0.5s;
		-moz-animation: myfirst 0.5s;	
		-webkit-animation: myfirst 0.5s;	
		-o-animation: myfirst 0.5s;	
	}
	
	</style>
</head>
<body>
	<div class="box"">
		
	</div>
</body>
</html>

1.在after里面要定义好要改变的属性，在这里是border和left, top

2，在hover里面定义好引用的动画和时间