Wave

HTML

<div id="circle">
    <div id="wave"></div>
</div>

CSS

#circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #fff, 0 0 0 10px #6fc6e0;
    overflow: hidden;
}
#wave {
    position: relative;
    width: 100%;
    height: 100%;
    background: #6fc6e0;
    border-radius: 50%;
    box-shadow: inset 0 0 50px #000;
}
#wave:before,
#wave:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -75%);
    width: 200%;
    height: 200%;
    transition: 1s;
}
#wave:before {
    border-radius: 45%;
    background: rgba(255,255,255,1);
    animation: animate 5s linear infinite;
}
#wave:after {
    border-radius: 40%;
    background: rgba(255,255,255,.5);
    animation: animate 10s linear infinite;
}
#circle:hover #wave:before,
#circle:hover #wave:after {
    top: -40%;
}

@keyframes animate {
    0%{transform: translate(-50%, -75%) rotate(0deg);}
    100%{transform: translate(-50%, -75%) rotate(360deg);}
}

Animate Wave