css3 实现 波纹效果

css部分

.outter {
animation-name: bubble;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

.inner,.outter{
position: absolute;
top:20%;left:50%;
opacity: .7;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #d436cc;
transform: translate(-50%,-50%);
}

.inner {opacity: 1;}

@keyframes bubble {
0% {
transform:translate(-50%,-50%) scale(1);
opacity:.3
}
25% {
opacity:.3;
transform:translate(-50%,-50%) scale(1.8)
}
100%,50% {
opacity:0;
transform:translate(-50%,-50%) scale(2)
}
}html部分
<div class="outter"></div>
<div class="inner"></div>

效果：