SOURCE

<div class="center-d">
    <div class="pulse1"></div>
    <div class="pulse2"></div>
    <div class="pulse3"></div>
</div>

<div class="demo">
  <div class="wrap">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
  </div>
</div>

<style>
@keyframes move{
    0%{}
    70%{width:50px;height:50px;opacity:1;}
    100%{width:70px;height:70px;opacity:0;}
    
}


.center-d{
    position:relative;
    width:10px;
    height:10px;
    background:red;
    border-radius:50% 50%;
    margin:100px auto;
}

.center-d div[class^="pulse"]{
    position:absolute;
    width:20px;
    height:20px;
    border:1px solid blue;
    border-radius:50%;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 12px blue;
    animation:move 1s linear infinite;
}
body .center-d .pulse2{
    animation-delay:0.4s;
    
}
body .center-d .pulse3{
    animation-delay:0.8s;
}
@keyframes demoM{
    0%{transform:translateX(0)}
    50%{transform:translateX(-150px)}
    
}

.demo{
    position:relative;
    width:30px;
    height:30px;
    border:1px solid;
    margin:200px auto;
    white-space:nowrap;
    overflow:hidden;

}
.demo .box{
    float:left;
    width:30px;
    height:30px;
    line-height:30px;
    text-align:center;
    background:#aaa;

}
.demo .wrap{
     width:150px;
     height:30px;
     
     animation:demoM 3s steps(5) infinite;
}
}

</style>