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 -
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
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.
Top comments (0)