CSS로 잔물결효과

CSS

.dot{width:12px;height:12px;background-color:#f33;border-radius:100%;display:inline-block}
.dot .ping{border:1px solid #f33;width:12px;height:12px;opacity:1;background-color:rgba(238,46,36,0.2);border-radius:100%;-webkit-animation-duration:1.25s;animation-durastion:1.25s;-webkit-animation-name:sonar;animation-name:sonar;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;display:block;margin:-1px 0 0 -1px}
@-webkit-keyframes sonar{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
100%{-webkit-transform:scale(3);transform:scale(3);opacity:0}}
@keyframes sonar{0%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
100%{-webkit-transform:scale(3);transform:scale(3);opacity:0}}

HTML

<span class="dot"><span class="ping"></span></span>

적용된모습