animated rings expanding with delay ripple water effects

HTML

<div class="css-ripple">
  <div class="css-ripples"></div>
  <div class="css-ripples"></div>
  <div class="css-ripples"></div>
</div>

CSS

.css-ripple {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: 50%;
    margin-bottom: 1rem;
  	min-height: 700px;
}

.css-ripples {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 10px solid white;
    width: 150px;
    height: 150px;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-animation: ripple 2s infinite;
    animation: ripple 2s infinite;
}
.css-ripple > div:nth-of-type(2) {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}
.css-ripple > div:nth-of-type(3) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}

@keyframes ripple {0%{width:150px;height:150px;border:40px solid white;opacity:0;}50%{opacity:.1;}90%{width:750px;height:750px;border:2px solid white;opacity:0;}100%{width:1500px;height:1500px;border:2px solid white;opacity:0;}}