DEV Community

Avinash Kumar
Avinash Kumar

Posted on

Creating a Pulsing Circle using CSS

There is a lot that we can do with CSS transitions and recently while searching for cool CSS tricks I found this amazing Pulsating Circle animation using CSS by kirupa.

WHAT WE ARE WORKING TOWARDS

This can be used behind images to produce this very unique design. Have a look -
mygif
We just need to create a outerContainer which will hold the image. And will act as the boundary for the the pulsating animation. We will then add many divs with the same class with different animation delay to produce the pulsating effect.

WHAT ANIMATION ACCOMPLISHES

We are fading one circle to into another in a outward or inward way.That is, we are basically animating the circles in a loop with different time period.

THE CODE

Code containing animation
Well if you were expecting to try to copy paste I am sorry, but doing and making changes to the code on your will help you learn. Also if you still find it difficult, you can always check out Kirupa's original post.
Well I hope you could see some glimpses of CSS magic that you can perform without using JavaScript or animation library such as Framer-motion.
Until next time.
penguin walking saying bye bye

Top comments (0)