如何让div在过渡动画的全过程及前后阶段都始终保持圆形形态

原因分析 #

你当前出现变形的核心原因有两个：

1. 仅给宽高设置了过渡动画，border-radius没有加入过渡属性列表，导致圆角值和宽高变化不同步，过渡过程中圆角比例和宽高不匹配
2. 使用固定px值定义圆角，需要手动匹配不同状态的宽高，容错率低

最优解决方案 #

直接使用百分比定义圆角，border-radius: 50%会自动以当前元素的宽高为基准计算圆角值，永远保持圆形，不需要额外设置hover状态的圆角：

div {
  width: 100px;
  height: 100px;
  background: skyblue;
  transition: width 2s, height 2s;
  border: 2px solid black;
  border-radius: 50%;
}

div:hover {
  width: 200px;
  height: 200px;
}

<div></div>

兼容固定px圆角的解决方案 #

如果你需要坚持使用固定px值定义圆角，只需要把border-radius也加入过渡属性列表，让它和宽高同步变化即可：

div {
  width: 100px;
  height: 100px;
  background: skyblue;
  transition: width 2s, height 2s, border-radius 2s;
  border: 2px solid black;
  border-radius: 50px;
}

div:hover {
  width: 200px;
  height: 200px;
  border-radius: 100px;
}

<div></div>

内容的提问来源于stack exchange，提问作者pr0grammar