I had a need to create a CSS animation that showed a “beacon” using CSS. Basically, I was dropping an animation showing where someone was located on a map. So, I was setting a background image of a container to an image and then placing a “bursting” dot within the container based on the location. Instead of using an animated gif like the one showing below:

Beacon

I opted to use CSS. By using the ::before psuedo element, I was able to use an animation on an infinite loop to accomplish the desired outcome. Below is a sample HTML file that creates the beacon image shown above: