How can I create a CSS animation to fade out the border of an element to the sides on hover?

Issue

I'm working on a web project and trying to achieve a specific visual effect using CSS. I want to create an animation where, upon hovering over an element, the border gradually fades out towards the sides, giving the appearance of the border width reducing to zero. I've attempted various approaches, including keyframes and transitions, but haven't been successful.

Here's the relevant part of my CSS code:

.button-bubble:hover {
    border-radius: 1000pt;
    animation: border-fade-out 250ms ease forwards;
    animation-delay: 50ms;
}

@keyframes border-fade-out {
    0% {
        border-color: white;
    }

    100% {
        border: 0 solid white; /* This doesn't achieve the desired fade-out effect to the sides */
    }
}

Additionally, I've recorded a video demonstrating the desired effect (I want to achieve the unhover/fade-out effect, download the video, and play it at a very low speed to see what I want).

The problem I'm facing is that the border seems to fade out uniformly, rather than specifically towards the sides. How can I modify my CSS to achieve a fade-out effect that appears the border is reducing in width towards the sides?

Any insights or alternative approaches would be greatly appreciated.

Solution

To be honest I can't really see any "border is reducing in width towards the sides" effect in the demo video because its playing the animation too fast.

However, this "border-fade-out" effect can be achieved using an outline covering the border: (By default an outline is drawn outside the border, so outline-offset is used to make it cover the original border.)

Finally, adjusting border-width can cause the element to move slightly. Make the border transparent instead can solve the problem. (Adjusting outline-width doesn't effect the layout of the document because outlines don't take up space.)

Here are some examples:

.button-bubble {
  /*Styling for better demo*/
  width: 100px;
  height: 33px;
  margin: 1rem;
  box-sizing: content-box;
  background-color: rgb(245, 245, 245);
  
  border: var(--bwidth) solid rgb(220, 220, 220);
  border-radius: 1000pt;
  --bwidth: 1px;
  
  /*outline does not cover the border when not hovered*/
  outline: 0px solid transparent;
  outline-offset: calc(-1 * var(--bwidth));
}

.button-bubble:hover {
  animation: border-fade-out 250ms ease forwards;
  animation-delay: 50ms;
}

@keyframes border-fade-out {
  0% {}
  100% {
    /*grow the outline width to cover the border*/
    outline-width: var(--bwidth);
    /*Change the border color as well makes the transition looks smoother*/
    outline-color: white;
    border-color: transparent;
  }
}


/*following adds variants for better demo*/
.border-3 {
  --bwidth: 3px;
}
.border-5 {
  --bwidth: 5px;
}
.background-fade-out {
  transition: background-color 0ms;
}
.background-fade-out:hover {
  background-color: white;
  transition: background-color 250ms ease 50ms;
}

<div>
  <button class="button-bubble background-fade-out">Fade All</button>
  <button class="button-bubble border-3 background-fade-out">Fade All</button>
  <button class="button-bubble border-5 background-fade-out">Fade All</button>
</div>

<div>
    <button class="button-bubble">Fade Border</button>
    <button class="button-bubble border-3">Fade Border</button>
    <button class="button-bubble border-5">Fade Border</button>
</div>

Answered By - SyndRain