css3 - How to create a pulsing glow ring animation in CSS? -

i way website made rings glow , pulse out , know how did it.

i can make similar i'm not good.

so able figure out doesn't seem work.

css:

glowycircleouter.blue .glow4 {   box-shadow: 0 0 25px #287ec6; } .glowycircleouter .glow4 {   -webkit-animation: glowyglow 3s 2250ms infinite;   -moz-animation: glowyglow 3s 2250ms infinite;   -ms-animation: glowyglow 3s 2250ms infinite;   -o-animation: glowyglow 3s 2250ms infinite;   animation: glowyglow 3s 2250ms infinite;   animation-name: glowyglow;   animation-duration: 3s;   animation-timing-function: initial;   animation-delay: 2250ms;   animation-iteration-count: infinite;   animation-direction: initial;   animation-fill-mode: initial;   animation-play-state: initial; } .glowycircleouter .glow4 {   opacity: 0;   display: block;   position: absolute;   left: 50%;   top: 50%;   width: 200%;   height: 200%;   -webkit-transform: translate(-50%, -50%);   -moz-transform: translate(-50%, -50%);   -o-transform: translate(-50%, -50%);   -ms-transform: translate(-50%, -50%);   transform: translate(-50%, -50%);   -webkit-border-radius: 50%;   -moz-border-radius: 50%;   border-radius: 50%; } 

html:

<span class="glow4"></span> 

the threads linked in comments helpful don't think exact duplicate because 1 more complex due need multiple rings.

we can create effect animating transform: scale() , opacity of elements. here, need more 1 element because in linked website can see atleast 3 rings @ given point of time (one fading-in, 1 @ peak, 1 fading-out). adding same animation 2 pseudo-elements, inner element (the span) , delaying animation on 2 of them can achieve required animation effect.

div {    position: relative;    height: 100px;    width: 100px;    border-radius: 50%;    margin: 50px;    border: 2px solid white;  }  div:before,  div:after, span {    position: absolute;    content: '';    height: 100%;    width: 100%;    top: 0%;    left: 0%;    border-radius: 50%;    box-shadow: 0 0 15px #287ec6;    animation: glow-grow 2s ease-out infinite;  }  div:after {    animation-delay: .66s;  }  span{    animation-delay: 1.33s;    }  @keyframes glow-grow {    0% {      opacity: 0;      transform: scale(1);    }    80% {      opacity: 1;    }    100% {      transform: scale(2);      opacity: 0;    }  }  body {    background: black;  }

<div>    <span></span>  </div>