Pulsing Circles (CSS Animation)

programming web dev
1

Just a little example I created to highlight a pulsing effect: https://www.kirupa.com/animations/examples/pulsing_circle.html

The full markup looks as follows:

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Pulsing Circle</title>
  <style>
    #container {
      width: 600px;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }

    .circle {
      border-radius: 50%;
      background-color: deepskyblue;
      width: 150px;
      height: 150px;
      position: absolute;
      opacity: 0;
      animation: scaleIn 4s infinite cubic-bezier(.36, .11, .89, .32);
    }

    .item {
      z-index: 100;
      padding: 5px;
    }

    .item img {
      width: 150px;
      transform: translateY(1px);
    }

    @keyframes scaleIn {
      from {
        transform: scale(.5, .5);
        opacity: .5;
      }
      to {
        transform: scale(2.5, 2.5);
        opacity: 0;
      }
    }
  </style>
</head>

<body>

  <div id="outerContainer">
    <div id="container">
      <div class="item">
        <img src="https://www.kirupa.com/images/orange.png" />
      </div>
      <div class="circle" style="animation-delay: -1s"></div>
      <div class="circle" style="animation-delay: 0s"></div>
      <div class="circle" style="animation-delay: 1s"></div>
      <div class="circle" style="animation-delay: 2s"></div>
    </div>
  </div>
</body>

</html>

Tutorial soon when I get some time shortly :slight_smile:

3 Likes
2

Looks neat! One of my first-ever websites used deepskyblue… this was before I learned about CSS or hex colors, etc.

2 Likes
3

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.

4

Any particular reason or benefit for the inline style, regarding the animation-delay ?

5

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.

1 Like
6

Gotcha, was just curious - seems reasonable enough. :smile:

1 Like
7

Thank U

1 Like