CSS border transition for rounded element - css

Question

I'm trying to achieve a transition effect while hover over a rounded element.
The effect should comes from inside out.
body {
background: #eee;
}
.outer-circle {
position: relative;
width: 32px;
height: 32px;
border-radius: 100%;
}
.outer-circle:hover {
width: 34px;
height: 34px;
border: 2px solid #000;
transition: border 300ms;
transition-timing-function: cubic-bezier(0.64, 0.04, 0.35, 1);
}
.inner-circle {
position: relative;
width: 32px;
height: 32px;
margin: 1px;
border:1px solid #999;
border-radius: 100%;
background: brown;
}
<div class="outer-circle">
<div class="inner-circle">
</div>
</div>
How to get this animation ?

Answer 1

The reason why your example appears to be a little broken is because the outer circle is part of the document flow: whenever you change the border-radius, it will cause the entire layout to be repainted. What you need is to take it out of the document flow, e.g. use position: absolute.
In fact, you don't really need two elements: just one is enough. The filled circle should be the main element, and the pseudo-element is just a smaller version of the circle with a border. The pseudo-element will be the outer circle as you know it. The trick is to:
Absolutely position the pseudo-element behind the filled circle
Set its size to be smaller than the filled circle, and this can be done using scale(0.5) or any arbitrary value that will ensure the outline gets hidden.
Then, when the element is hovered on, you can then scale up the pseudo-element as needed, by setting the transform to scale(1).
The advantage of using this method is that you are not transitioning pixel-precise values like border-width, width, or height, and you can offload that transition over to the GPU.
body {
background: #eee;
}
.circle {
position: relative;
width: 32px;
height: 32px;
border-radius: 100%;
}
.circle {
position: relative;
width: 32px;
height: 32px;
margin: 1px;
border-radius: 100%;
background: brown;
}
.circle::before {
/* Final appearance of the outer circle */
width: 36px;
height: 36px;
border: 2px solid #000;
border-radius: 100%;
/* Position it absolutely and center it relative to the circle */
/* Remember to scale it down, so it's hidden nicely in the back */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.5);
content: '';
z-index: -1;
transition: all 300ms;
transition-timing-function: cubic-bezier(0.64, 0.04, 0.35, 1);
}
.circle:hover::before {
transform: translate(-50%, -50%) scale(1);
}
<div class="circle">
</div>

Answer 2

Might this be helpful
body {
background: #eee;
}
.outer-circle {
position: relative;
width: 34px;
height: 34px;
border: 2px solid #eee;
border-radius: 100%;
}
.outer-circle:hover {
width: 36px;
height: 36px;
border: 2px solid #000;
transition: border 300ms;
transition-timing-function: cubic-bezier(0.64, 0.04, 0.35, 1);
}
.inner-circle {
position: relative;
width: 32px;
height: 32px;
margin: 1px;
border:1px solid #999;
border-radius: 100%;
background: brown;
}

Answer 3

Try this code.. i think it will much better from now..
css
body {
background: #eee;
}
.outer-circle {
position: relative;
width: 32px;
height: 32px;
border-radius: 100%;
transition: 0.5s all ease 0s;
}
.outer-circle:hover {
width: 34px;
height: 34px;
transition: 0.5s all ease 0s;
}
.outer-circle:hover .inner-circle {
border-color: #000;
}
.inner-circle {
position: relative;
width: 100%;
height: 100%;
border:2px solid brown;
border-radius: 100%;
background: brown;
}