动画波纹扩散效果（jq+keyframes）

水纹扩散

CSS:
/*扩散效果*/
.container {
	width:400px;
	height:400px;
	position: relative;
	margin: auto;
	transform:translate(-50%,-50%);
	transform: rotateX(75deg);
    z-index: 0;
}
//圆初始大小
.container .cir {
	width:20px;
	height:20px;
	border-radius:50%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
/*波纹效果*/
@keyframes cirAni {
	0% {
	  width:20px;
	  height:20px;
	  border:1px solid #eee;
	}
	50%{
	  width:100px;
	  height:100px;
	  border:1px solid #3177af;
 	}
	100% {
	  width:300px;
	  height:300px;
	  border:1px solid #eee;
	}
}

//动画
.container .cir.active {
	animation:cirAni 3s linear infinite;
}

HTML:
<!-- 扩散效果 -->
<div class="container">
   <div class="cir"></div>
   <div class="cir"></div>
   <div class="cir"></div>
</div>

JS:
// 水波纹 延迟执行
$(".container .cir").each(function() {
    $(this).addClass("active");
    $(this).css("animation-delay", $(this).index() * 0.5 + "s");
});

效果截图：