CSS - Animation scale with border-radius - css

Question

I'm working on a animation with scaling a box and it is rounded with 8px. Ref: https://codepen.io/anon/pen/ePGxqy. However, the rounded angle is weird when the box expanded and I don't want to scale it by changing its width in keyframes. How can I correctly scale a rounded box with a rounded border?
#box {
position: relative;
width: 55px;
height: 55px;
background: #aaa;
margin: 0 auto;
border-radius: 8px;
animation-name: singleRevert;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#box:hover {
animation-name: singleExpend;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes singleRevert {
0% {
transform: scaleX(7.5) scaleY(0.46)
}
50% {
transform: scaleX(1) scaleY(0.46)
}
100% {
transform: scaleX(1) scaleY(1)
}
}
#keyframes singleExpend {
0% {
transform: scaleX(1) scaleY(1)
}
50% {
transform: scaleX(1) scaleY(0.46)
}
100% {
transform: scaleX(7.5) scaleY(0.46)
}
}
<div id="box"></div>

Answer 1

Basically you need to animate your border radius to match the scale of your box.
For simplicity's sake if your box radius is 8px and you scale your box by 8 times your border radius should be 1px at the scaled size. If your box is 0.5 scaled the border would be 16px;
Alternatively you could animate the width and height of the box. This would respect the borders and you would not have to change them in this case.
Updated your version:
#box {
position: relative;
width: 55px;
height: 55px;
background: #aaa;
margin: 0 auto;
border-radius: 8px;
animation-name: singleRevert;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#box:hover {
animation-name: singleExpend;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes singleRevert {
0% {
transform: scaleX(8) scaleY(0.5);
border-radius: 1px;
}
50% {
transform: scaleX(1) scaleY(0.5)
border-radius: 8px;
}
100% {
transform: scaleX(1) scaleY(1)
border-radius: 8px;
}
}
#keyframes singleExpend {
0% {
transform: scaleX(1) scaleY(1)
border-radius: 8px;
}
50% {
transform: scaleX(1) scaleY(0.5)
border-radius: 8px;
}
100% {
transform: scaleX(8) scaleY(0.5)
border-radius: 1px;
}
}
<div id="box"></div>
Simple version:
#box {
position: relative;
width: 55px;
height: 55px;
background: #aaa;
margin: 0 auto;
border-radius: 8px;
animation-name: singleRevert;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#box:hover {
animation-name: singleExpend;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#keyframes singleRevert {
0% {
width: 400px;
height: 40px;
}
50% {
width: 55px;
height: 40px;
}
100% {
width: 55px;
height: 55px;
}
}
#keyframes singleExpend {
0% {
width: 55px;
height: 55px;
}
50% {
width: 55px;
height: 40px;
}
100% {
width: 400px;
height: 40px;
}
}
<div id="box"></div>

Answer 2

The problem with animating it by using transform is that you are stretching the element. So whatever border-radius you have it set to, will also get stretched along with the width and height of your element. ScaleX and ScaleY scales the ENTIRE element, not just the dimensions.
A better solution to animating the size of your element while having the border radius be consistent is to animate the height and width. Something like this would work:
#keyframes singleExpend {
0% {
width: 55px;
height: 55px;
}
50% {
width: 55px;
height: 40px;
}
100% {
width: 400px;
height: 40px;
}
}
Good luck!