# Pulsing Circles (CSS Animation) **URL:** \ **Category:** web dev\ **Created:** [May 12, 2018, 2:42am UTC](https://forum.kirupa.com/t/pulsing-circles-css-animation/638202 "2018-05-12T02:42:23Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [May 12, 2018, 2:42am UTC](https://forum.kirupa.com/t/pulsing-circles-css-animation/638202/1 "2018-05-12T02:42:24Z")
Just a little example I created to highlight a pulsing effect: [https://www.kirupa.com/animations/examples/pulsing\_circle.html](https://www.kirupa.com/animations/examples/pulsing_circle.html) The full markup looks as follows: ``` Pulsing Circle
``` Tutorial soon when I get some time shortly 🙂 ---
**Author:** ![krilnon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/krilnon/32/34_2.png) [@krilnon](https://forum.kirupa.com/u/krilnon)\ **Post date:** [May 12, 2018, 4:18am UTC](https://forum.kirupa.com/t/pulsing-circles-css-animation/638202/2 "2018-05-12T04:18:18Z")
Looks neat! One of my first-ever websites used `deepskyblue`… this was before I learned about CSS or hex colors, etc. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [May 12, 2018, 5:05am UTC](https://forum.kirupa.com/t/pulsing-circles-css-animation/638202/3 "2018-05-12T05:05:55Z")
Visual Studio Code always displays the list of named color values for any color property, so I scroll through them to find something interesting! The `deepskyblue` color is a great one that I stumbled upon haha. ---
**Author:** ![prg9](https://avatars.discourse-cdn.com/v4/letter/p/8dc957/32.png) [@prg9](https://forum.kirupa.com/u/prg9)\ **Post date:** [May 12, 2018, 7:32pm UTC](https://forum.kirupa.com/t/pulsing-circles-css-animation/638202/4 "2018-05-12T19:32:14Z")
Any particular reason or benefit for the inline style, regarding the animation-delay ? ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [May 12, 2018, 7:35pm UTC](https://forum.kirupa.com/t/pulsing-circles-css-animation/638202/5 "2018-05-12T19:35:04Z")
I wanted to give each circle a different `animation-delay` value, and it was fewer keystrokes than creating a different style rule for each of the circles. This also makes it easier to add or remove circles if I wanted to alter this effect later. I just have to touch the HTML as opposed to making the HTML change and ensuring the CSS rules are up-to-date. ---
**Author:** ![prg9](https://avatars.discourse-cdn.com/v4/letter/p/8dc957/32.png) [@prg9](https://forum.kirupa.com/u/prg9)\ **Post date:** [May 12, 2018, 7:39pm UTC](https://forum.kirupa.com/t/pulsing-circles-css-animation/638202/6 "2018-05-12T19:39:54Z")
Gotcha, was just curious - seems reasonable enough. 😄 ---
**Author:** ![Hesam\_Moosapour](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/hesam_moosapour/32/11042_2.png) [@Hesam\_Moosapour](https://forum.kirupa.com/u/Hesam_Moosapour)\ **Post date:** [February 13, 2020, 9:16pm UTC](https://forum.kirupa.com/t/pulsing-circles-css-animation/638202/7 "2020-02-13T21:16:02Z")
Thank U