SOURCE

var c=document.getElementById("canvas1");
var cxt=c.getContext("2d");
var c2=document.getElementById("canvas2");
var cxt2=c2.getContext("2d");
var t=1
function drawStrokeO(x,y,r){
    drawFill(x,y,10)
    cxt.strokeStyle="red"
    cxt.beginPath()
    cxt.arc(x,y,r,0,2*Math.PI)
    cxt.stroke()
}
function drawStrokeT(x,y,r){
cxt2.globalAlpha=(5/r);
    cxt2.beginPath();
    cxt2.arc(x,y,r,0,2*Math.PI,false);
    cxt2.fillStyle="red";//填充颜色,默认是黑色
    cxt2.fill();//画实心圆
    cxt2.closePath();
}
function drawFill(x,y,r){
    cxt.beginPath();
    cxt.arc(x,y,r,0,2*Math.PI,false);
    cxt.fillStyle="red";//填充颜色,默认是黑色
    cxt.fill();//画实心圆
    cxt.closePath();
}


setInterval(()=>{
    cxt.clearRect(0,0,c.width,c.height)
    cxt2.clearRect(0,0,c.width,c.height)
    if(t===4){
        t=1
    }else{
        t++
    }
    for(let i=0;i<t;i++){
        drawStrokeO(50,50,10+i*4)
        drawStrokeT(150,50,5+i*4)
    }
},200)

<h3>canvas</h3>
<canvas id="canvas1" ></canvas>
<canvas id="canvas2" ></canvas>
<h3>css3</h3>
<div class="c3-box" >
    <i class="point"></i>
    <span class="animate-bounce-in "></span>
</div>

canvas{
    border: 1px solid #333;
}
.c3-box{
    height: 150px;
    width: 300px;
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
}
.c3-box  feImage.point{
      display: inline-block;
    width: 20px;
    height: 20px;
    background-color: red;
    border: 0;
    border-radius: 10px;
     animation: 500ms ease-in-out 0s infinite alternate none running ani_breathe;
}
 .animate-bounce-in {
       display: inline-block;
       width: 50px;
       height: 50px;
       border: 1px solid #f00;
       border-radius: 25px;
        animation-name: bounceIn;
        animation-fill-mode: both;
        animation-duration: 1s;
 }
 @keyframes ani_breathe {
	0% {
		opacity: 1;
		box-shadow: 0 1px 10px rgba(255,0,0,1)
	}
    50% {
		opacity: 1;
		box-shadow:0 1px 20px rgba(255,0,0,1)
	}
	100% {
		opacity: 1;
		box-shadow:0 1px 30px rgba(255,0,0,1)
	}
}
    @keyframes bounceIn {
      0%,
      20%,
      40%,
      60%,
      80%,
      100% {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      }
      0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3) translate(100%, -50%);
      }
      20% {
        transform: scale3d(1.1, 1.1, 1.1) translate(100%, -50%);
      }
      40% {
        transform: scale3d(0.9, 0.9, 0.9) translate(100%, -50%);
      }
      60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03) translate(100%, -50%);
      }
      80% {
        transform: scale3d(0.97, 0.97, 0.97) translate(100%, -50%);
      }
      100% {
        opacity: 1;
        transform: scale3d(1, 1, 1) translate(100%, -50%);
      }
    }