How to create a pulsating glow animation in CSS?

Question

I love the way this website makes their rings glow and throb, and would like to know how they did it.

I can do something similar, but I'm not very good.

So that's all I managed to figure out, but it didn't seem to 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> 

Answer 1

Topics related to comments are useful, but I don’t think this is an exact duplicate, because this one is a bit more complicated due to the need for multiple rings.

We can create this effect by animating transform: scale() and the opacity elements. Here we need more than 1 element, because on the linked website we can see at least 3 rings at any given time (the one that fades out, the one that is at its peak, the one that disappears). By adding the same animation to two pseudo-elements, an internal element ( span ) and delaying the animation on two of them, we can achieve the desired 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>