animating border to transparent with keyframes - html

Question

I'm trying to make simple animation of a circle which border goes from red to transparent color. How I'm trying to do it is to set initial color as red and then animate it to transparent with keyframes like so:
.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>
Seemingly nothing happens but after fiddling with it a bit I'm aware that the animation actually works, but the transparent animation is shown on top of existing red border and effect is that it looks like nothing is happening.
What i'm trying to achive is to have the border go from red to transparent, making it look like it's pulsating but without the circle changing it's size.

Answer 1

Try box-shadow instead of border
Stack 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

You won't see anything because you background-color is the same color as the border color. Also your border definition inside your animation was wrong, the width must come before the border style:
So for example it's 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>
But i think you want to achieve a pulsating effect, therefore i would recommend you to use transform: scale() to create the desired effect.
#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 3

Just add background-clip: padding-box; to the .pulse element. More info here. As said in the previous answer, you can also use the box-shadow, but you have to keep in mind that box shadow does not take space around the element. So You will have a different behavior.
.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>