Creating an animated border that fades to transparency using keyframes

Question

Creating an animated border that fades to transparency using keyframes

I am attempting to create a simple animation of a circle with a border that transitions from red to a transparent color. My approach is to initially set the color to red and then animate it to transparent using keyframes as follows:

.pulse{
  margin: 20px;
  width:100px;
  height: 100px;
  background-color: red;
  border-radius: 100px;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease;
}

@keyframes pulse{
  0%{border:solid 1px rgba(255, 0, 0, 1)}
  100%{border:solid 1px rgba(255, 0, 0, 0)}
}

    <div class="animation">
      <div class="pulse"></div>
    </div>

Initially, it seems like nothing is happening, but upon closer inspection, I realize that the animation is indeed working. However, the transparent animation is being displayed on top of the existing red border, creating the illusion that nothing is changing. My goal is to have the border transition smoothly from red to transparent, giving the appearance of pulsating without altering the size of the circle.

html css animation

Answer 1

Answer №1

Consider using box-shadow in place of border

Code Snippet

.pulse {
  margin: 20px;
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 100px;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 4px rgba(255, 0, 0, 1);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(255, 0, 0, 1);
  }
}

<div class="animation">
  <div class="pulse"></div>
</div>

Answer 2

Consider using box-shadow in place of border

Code Snippet

.pulse {
  margin: 20px;
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 100px;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 4px rgba(255, 0, 0, 1);
  }
  100% {
    box-shadow: 0 0 0 0px rgba(255, 0, 0, 1);
  }
}

<div class="animation">
  <div class="pulse"></div>
</div>

Answer 3

Answer №2

Your background color is the same as the border color, which is why you won't see anything. Additionally, the border definition in your animation is incorrect - the width should come before the border style:

For example, it should be 1px solid color instead of solid 1px rgba(255,0,0,1).

.pulse {
  animation: pulse 1s ease infinite alternate;
  background-color: #ddd;
  border-radius: 100px;
  height: 100px;
  margin: 20px;
  width: 100px;
}

@keyframes pulse {
  0% {
    border: 1px solid rgba(255, 0, 0, 1)
  }
  100% {
    border: 1px solid rgba(255, 0, 0, 0)
  }
}

<div class="animation">
  <div class="pulse"></div>
</div>

However, if you are aiming for a pulsating effect, I recommend using transform: scale() to achieve the desired result.

@keyframes pulse{
  from { transform: scale(1) }
  to { transform: scale(.75) }
}

.pulse{
  margin: 20px;
  width:100px;
  height: 100px;
  border-radius: 100px;
  background-color: red;
  animation: pulse 1s ease infinite alternate;
}

<div class="animation">
      <div class="pulse"></div>
    </div>

Answer 4

Your background color is the same as the border color, which is why you won't see anything. Additionally, the border definition in your animation is incorrect - the width should come before the border style:

For example, it should be 1px solid color instead of solid 1px rgba(255,0,0,1).

.pulse {
  animation: pulse 1s ease infinite alternate;
  background-color: #ddd;
  border-radius: 100px;
  height: 100px;
  margin: 20px;
  width: 100px;
}

@keyframes pulse {
  0% {
    border: 1px solid rgba(255, 0, 0, 1)
  }
  100% {
    border: 1px solid rgba(255, 0, 0, 0)
  }
}

<div class="animation">
  <div class="pulse"></div>
</div>

However, if you are aiming for a pulsating effect, I recommend using transform: scale() to achieve the desired result.

@keyframes pulse{
  from { transform: scale(1) }
  to { transform: scale(.75) }
}

.pulse{
  margin: 20px;
  width:100px;
  height: 100px;
  border-radius: 100px;
  background-color: red;
  animation: pulse 1s ease infinite alternate;
}

<div class="animation">
      <div class="pulse"></div>
    </div>

Answer 5

Answer №3

To achieve the desired effect, simply include the following CSS rule background-clip: padding-box; within the .pulse element. For more information, you can refer to this resource. Another option mentioned in the previous response is to utilize box-shadow, but bear in mind that box-shadow does not account for space around the element, resulting in a different outcome.

.pulse {
  background-clip: padding-box;
  margin: 20px;
  width:100px;
  height: 100px;
  background-color: red;
  border-radius: 100px;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes pulse{
  0%{border:solid 1px rgba(255, 0, 0, 1)}
  100%{border:solid 1px rgba(255, 0, 0, 0)}
}

<div class="animation">
  <div class="pulse"></div>
</div>

Answer 6

To achieve the desired effect, simply include the following CSS rule background-clip: padding-box; within the .pulse element. For more information, you can refer to this resource. Another option mentioned in the previous response is to utilize box-shadow, but bear in mind that box-shadow does not account for space around the element, resulting in a different outcome.

.pulse {
  background-clip: padding-box;
  margin: 20px;
  width:100px;
  height: 100px;
  background-color: red;
  border-radius: 100px;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes pulse{
  0%{border:solid 1px rgba(255, 0, 0, 1)}
  100%{border:solid 1px rgba(255, 0, 0, 0)}
}

<div class="animation">
  <div class="pulse"></div>
</div>

Creating an animated border that fades to transparency using keyframes

Answer №1

Answer №2

Answer №3

Similar questions

An unusual outcome occurred while attempting to duplicate the text

Is it possible to insert an image as the background of a specific word within a paragraph?

Vue component always renders a new line

CSS designed for small-screen laptops is also being utilized on iPads running Safari

Masonry List with Next.js Image Fill

Adjust the width of a div element to a specific size, center the div horizontally, and justify

A guide on aligning a CSS item perfectly in the center using absolute positioning

Utilizing a flexbox container within a table container, implementing PRE tags for handling overflow

Table does not have appropriate rowspan and colspan attributes

Insert a new row into a table using tablesorter jQuery

Angular input range slider that automatically rounds decimal values from the data bindings

"Learn how to specifically extract parent <li> elements without including the child <li> elements

Swap out the div block with a new one

Issue encountered when attempting to invoke a PHP function using Javascript through AJAX

How can we make a link stand out when clicked in jQuery, and additionally display a hidden element?

Combining Three HTML Tags Into a Single Page

ReactJS not responding to Bootstrap toggler button

The newly added highlighted CSS in jQuery cannot be removed once an alert is generated

Overridden CSS rules

What is the best way to create a triangle-shaped div using CSS styling?